文字position,然后通过计算算出每个文字在弧上的坐标,然后设置left,top
专注于为中小企业提供网站建设、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业仙桃免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
你可以用添加/删除覆盖物这个API试试
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
var polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
new BMap.Point(116.425, 39.900)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线
var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
var polygon = new BMap.Polygon([
new BMap.Point(116.387112,39.920977),
new BMap.Point(116.385243,39.913063),
new BMap.Point(116.394226,39.917988),
new BMap.Point(116.401772,39.921364),
new BMap.Point(116.41248,39.927893)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形
var pStart = new BMap.Point(116.392214,39.918985);
var pEnd = new BMap.Point(116.41478,39.911901);
var rectangle = new BMap.Polygon([
new BMap.Point(pStart.lng,pStart.lat),
new BMap.Point(pEnd.lng,pStart.lat),
new BMap.Point(pEnd.lng,pEnd.lat),
new BMap.Point(pStart.lng,pEnd.lat)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建矩形
//添加覆盖物
function add_overlay(){
map.addOverlay(marker); //增加点
map.addOverlay(polyline); //增加折线
map.addOverlay(circle); //增加圆
map.addOverlay(polygon); //增加多边形
map.addOverlay(rectangle); //增加矩形
}
//清除覆盖物
function remove_overlay(){
map.clearOverlays();
}
不过这需要三角函数,关于三角函数可以去看一下《揭秘javascript的三角函数》这篇文章,那里面对三角函数讲得很清楚了。
参考资料:
《揭秘javascript的三角函数》来自:
纯js不好实现,但是配合html,css就有了近似的办法.下面提供一个解决方案,已知两个点的坐标,为它们画一条带箭头的弧线.
html
head
meta http-equiv = "content-type" content = "text/html; charset = gb2312"
title箭头弧线/title
style type = "text/css"
span { position: absolute; width: 5px; height: 5px; background-color: #0000ff; display: block; border-radius: 50%; }
/style
script language = "javascript"
function locateO () {
var x0 = parseInt (spnA.style.left, 10), y0 = parseInt (spnA.style.top, 10), x1 = parseInt (spnB.style.left, 10), y1 = parseInt (spnB.style.top, 10), horizontalDistance = Math.abs (x1 - x0), verticalDistance = Math.abs (y1 - y0), x = Math.min (x0, x1) + horizontalDistance / 2, y = Math.min (y0, y1) + verticalDistance / 2, distance = Math.sqrt (Math.pow (horizontalDistance, 2) + Math.pow (verticalDistance, 2)), array = new Array (x0, y0, x1, y1, distance);
spnO.style.left = x;
spnO.style.top = y;
return array;
}
function getRadian (x0, y0, x1, y1) {
var horizontalDistance = Math.abs (x1 - x0), verticalDistance = Math.abs (y1 - y0), rate = horizontalDistance == 0 ? 0 : verticalDistance / horizontalDistance, radian;
if (y1 y0) {
if (x1 x0) {
radian = - Math.atan (rate);
} else if (x1 == x0) {
radian = - Math.PI / 2;
} else {
radian = - (Math.PI - Math.atan (rate));
}
} else if (y1 == y0) {
radian = x1 left ? 0 : - Math.PI;
} else if (x1 x0) {
radian = - (Math.PI + Math.atan (rate));
} else if (x1 == x0) {
radian = - Math.PI * 3 / 2;
} else {
radian = - 2 * Math.PI + Math.atan (rate);
}
return radian;
}
function getAngle (radian) {
var angle = - radian * 180 / Math.PI;
return angle;
}
function slantArc (x0, y0, x1, y1) {
var radian = getRadian (x0, y0, x1, y1), angle = 360 - getAngle (radian);
cnvArc.style.transform = "rotate(" + angle + "deg)";
}
function drawArc (x0, y0, width) {
var context = cnvArc.getContext ("2d"), radius = width / 2, height = radius / 2;
cnvArc.width = width + 10;
cnvArc.height = height;
cnvArc.style.left = x0;
cnvArc.style.top = y0 - height;
context.ellipse (radius + 5, height, radius, height / 2, 0, 0, Math.PI * 2);
context.strokeStyle = "#00ff00";
context.stroke ();
}
function hex (figure) {
return figure.toString (16);
}
function zeroize (cluster) {
if (cluster.length 2) {
cluster = 0 + cluster;
}
return cluster;
}
function getColour (red, green, blue) {
return "#" + zeroize (hex (red)) + zeroize (hex (green)) + zeroize (hex (blue));
}
function printArc () {
var width = cnvArc.width, height = cnvArc.height, context = cnvArc.getContext ("2d"), imageData = context.getImageData (0, 0, width, height), data = imageData.data, coordinates = new Array (), cluster = "", i, red, green, blue, colour, index, x, y;
for (i = 0; i data.length; i += 4) {
red = data [i];
green = data [i + 1];
blue = data [i + 2];
colour = getColour (red, green, blue);
index = i / 4;
y = parseInt (index / width, 10);
x = index % width;
if (x == 0) {
//console.log (y + "\n" + cluster);
cluster = "";
}
cluster += x + ":" + colour + " ";
if (colour == "#00ff00") {
coordinates.push (new Array (x, y));
}
}
return coordinates;
}
function sortCoordinates (coordinates, direction) {
var i = 0, flag, j, coordinate;
do {
flag = false;
for (j = 0; j coordinates.length - 1 - i; j ++) {
if (direction (coordinates [j] [0] coordinates [j + 1] [0] || coordinates [j] [0] == coordinates [j + 1] [0] coordinates [j] [1] coordinates [j + 1] [1]) || ! direction (coordinates [j] [0] coordinates [j + 1] [0] || coordinates [j] [0] == coordinates [j + 1] [0] coordinates [j] [1] coordinates [j + 1] [1])) {
coordinate = coordinates [j];
coordinates [j] = coordinates [j + 1];
coordinates [j + 1] = coordinate;
flag = true;
}
}
i ++;
} while (flag);
}
function drawArrow (x0, y0, x1, y1) {
var context = cnvArc.getContext ("2d"), colour = "#00ff00", angle = (x1 - x0) / (y1 - y0);
context.strokeStyle = colour;
context.fillStyle = colour;
context.setLineDash ([3, 3]);
context.beginPath ();
context.arc (x0, y0, 1, 0, 2 * Math.PI);
context.translate (0, 0, 0);
context.moveTo (x0, y0);
context.lineTo (x1, y1);
context.fill ();
context.stroke ();
context.save ();
context.translate (x1, y1);
angle = Math.atan (angle);
context.rotate ((y1 = y0 ? 0 : Math.PI) - angle);
context.lineTo (- 3, - 9);
context.lineTo (0, - 3);
context.lineTo (3, - 9);
context.lineTo (0, 0);
context.fill ();
context.restore ();
context.closePath ();
}
function initialize () {
var array = locateO (), x0 = array [0], y0 = array [1], x1 = array [2], y1 = array [3], width = array [4], direction = x1 x0, coordinates, length, coordinate0, coordinate1, x2, y2, x3, y3;
drawArc (x0, y0, width);
coordinates = printArc ();
length = coordinates.length;
sortCoordinates (coordinates, direction);
coordinate0 = coordinates [length - 2];
x2 = coordinate0 [0];
y2 = coordinate0 [1];
coordinate1 = coordinates [length - 1];
x3 = coordinate1 [0];
y3 = coordinate1 [1];
drawArrow (x2, y2, x3, y3);
slantArc (x0, y0, x1, y1);
}
/script
/head
body style = "margin: 0;" onload = "initialize ()"
span id = "spnA" style = "left: 50px; top: 150px;"/span
span id = "spnB" style = "left: 850px; top: 350px;"/span
span id = "spnO"/span
canvas id = "cnvArc" style = "position: absolute; background-color: rgb(255, 255, 0, 0.01); z-index: 1; transform-origin: 0 100%;"/canvas
/body
/html
复制进来的代码都不带缩进的吗?
该代码纯手写,不从第三方处盗用.仅供参考.
canvas 元素负责在页面中设定一个区域,然后就可以通过 JavaScript 动态地在这个区域中绘制图形。
要使用 canvas 元素,必须先设置其 width 和 height 属性,指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息,如果浏览器不支持 canvas 元素,就会显示这些信息。
如果不添加任何样式或者不绘制任何图形,在页面中是看不到该元素的。
要在这块画布(canvas)上绘图,需要取得绘图上下文。而取得绘图上下文对象的引用,需要调用getContext() 方法并传入上下文的名字。传入 "2d" ,就可以取得 2D 上下文对象。
使用 toDataURL() 方法,可以导出在 canvas 元素上绘制的图像。这个方法接受一个参数,即图像的 MIME 类型格式,而且适合用于创建图像的任何上下文。
取得画布中的一幅 PNG 格式的图像:
如果绘制到画布上的图像源自不同的域, toDataURL() 方法会抛出错误。
使用 2D 绘图上下文提供的方法,可以绘制简单的 2D 图形,比如矩形、弧线和路径。2D 上下文的坐标开始于 canvas 元素的左上角,原点坐标是(0,0)。
2D 上下文的两种基本绘图操作是填充和描边。填充,就是用指定的样式(颜色、渐变或图像)填充图形;描边,就是只在图形的边缘画线。大多数 2D 上下文操作都会细分为填充和描边两个操作,而操作的结果取决于两个属性: fillStyle 和 strokeStyle 。
这两个属性的值可以是字符串、渐变对象或模式对象,而且它们的默认值都是 "#000000" 。如果为它们指定表示颜色的字符串值,可以使用 CSS 中指定颜色值的任何格式,包括颜色名、十六进制码、rgb 、 rgba 、 hsl 或 hsla 。
与矩形有关的方法包括 fillRect() 、strokeRect() 和 clearRect() 。这三个方法都能接收 4 个参数:矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。
fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过 fillStyle 属性指定:
strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过 strokeStyle 属性指定。
描边线条的宽度由 lineWidth 属性控制,该属性的值可以是任意整数。另外,通过 lineCap 属性可以控制线条末端的形状是平头、圆头还是方头( "butt" 、"round" 或 "square" ),通过 lineJoin 属性可以控制线条相交的方式是圆交、斜交还是斜接( "round" 、 "bevel" 或 "miter" )。
clearRect() 方法用于清除画布上的矩形区域。本质上,这个方法可以把绘制上下文中的某一矩形区域变透明。
通过路径可以创造出复杂的形状和线条。要绘制路径,首先必须调用 beginPath() 方法,表示要开始绘制新路径。然后,再通过调用下列方法来实际地绘制路径。
如果想绘制一条连接到路径起点的线条,可以调用closePath() 。如果路径已经完成,你想用 fillStyle 填充它,可以调用 fill() 方法。另外,还可以调用 stroke() 方法对路径描边,描边使用的是 strokeStyle 。最后还可以调用 clip() ,这个方法可以在路径上创建一个剪切区域。
绘制一个不带数字的时钟表盘:
isPointInPath() 方法接收 x 和 y 坐标作为参数,用于在路径被关闭之前确定画布上的某一点是否位于路径上。
绘制文本主要有两个方法: fillText() 和 strokeText() 。这两个方法都可以接收 4 个参数:要绘制的文本字符串、x 坐标、y 坐标和可选的最大像素宽度。
两个方法都以下列 3 个属性为基础:
fillText() 方法使用fillStyle 属性绘制文本, strokeText() 方法使用 strokeStyle 属性为文本描边。
通过上下文的变换,可以把处理后的图像绘制到画布上。2D 绘制上下文支持各种基本的绘制变换。创建绘制上下文时,会以默认值初始化变换矩阵,在默认的变换矩阵下,所有处理都按描述直接绘制。为绘制上下文应用变换,会导致使用不同的变换矩阵应用处理,从而产生不同的结果。
把原点变换到表盘的中心:
使用 rotate() 方法旋转时钟的表针:
可以调用 save() 方法,调用这个方法后,当时的所有设置都会进入一个栈结构,得以妥善保管。调用 restore() 方法,在保存设置的栈结构中向前返回一级,恢复之前的状态。
save() 方法保存的只是对绘图上下文的设置和变换,不会保存绘图上下文的内容。
可以使用 drawImage()方法把一幅图像绘制到画布上。
以使用三种不同的参数组合。最简单的调用方式是传入一个 HTML img 元素,以及绘制该图像的起点的 x 和 y 坐标。
如果想改变绘制后图像的大小,可以再多传入两个参数,分别表示目标
宽度和目标高度。通过这种方式来缩放图像并不影响上下文的变换矩阵。
绘制出来的图像大小会变成 20×30 像素。
可以选择把图像中的某个区域绘制到上下文中。 drawImage() 方法的这种调用方式总共需要传入 9 个参数:要绘制的图像、源图像的 x 坐标、源图像的 y 坐标、源图像的宽度、源图像的高度、目标图像的 x 坐标、目标图像的 y 坐标、目标图像的宽度、目标图像的高度。这样调用drawImage() 方法可以获得最多的控制。
2D 上下文会根据以下几个属性的值,自动为形状或路径绘制出阴影。
要创建一个新的线性渐变,可以调用 createLinearGradient() 方法。这个方法接收 4 个参数:起点的 x 坐标、起点的 y 坐标、终点的 x 坐标、终点的 y 坐标。调用这个方法后,它就会创建一个指定大小的渐变,并返回
CanvasGradient 对象的实例。
创建了渐变对象后,下一步就是使用 addColorStop() 方法来指定色标。这个方法接收两个参数:色标位置和 CSS 颜色值。色标位置是一个 0(开始的颜色)到 1(结束的颜色)之间的数字。
为了让渐变覆盖整个矩形,而不是仅应用到矩形的一部分,矩形和渐变对
象的坐标必须匹配才行。
要创建径向渐变(或放射渐变),可以使用 createRadialGradient() 方法。这个方法接收 6 个参数,对应着两个圆的圆心和半径。前三个参数指定的是起点圆的原心(x 和 y)及半径,后三个参数指定的是终点圆的原心(x 和 y)及半径。
模式其实就是重复的图像,可以用来填充或描边图形。要创建一个新模式,可以调用createPattern() 方法并传入两个参数:一个 HTML img 元素和一个表示如何重复图像的字符串。其中,第二个参数的值与 CSS 的 background-repeat 属性值相同,包括 "repeat" 、 "repeat-x" 、"repeat-y" 和 "no-repeat" 。
createPattern() 方法的第一个参数也可以是一个 video 元素,或者另一个 canvas 元素。
2D 上下文的一个明显的长处就是,可以通过 getImageData() 取得原始图像数据。这个方法接收4 个参数:要取得其数据的画面区域的 x 和 y 坐标以及该区域的像素宽度和高度。
取得左上角坐标为(10,5)、大小为 50×50 像素的区域的图像数据:
返回的对象是 ImageData 的实例。每个 ImageData 对象都有三个属性: width 、 height 和data 。其中 data 属性是一个数组,保存着图像中每一个像素的数据。
在 data 数组中,每一个像素用4 个元素来保存,分别表示红、绿、蓝和透明度值。
数组中每个元素的值都介于 0 到 255 之间(包括 0 和 255)。
还有两个会应用到 2D 上下文中所有绘制操作的属性: globalAlpha 和 globalCompositionOperation 。其中, globalAlpha 是一个介于 0 和 1 之间的值(包括 0和 1),用于指定所有绘制的透明度。默认值为 0。如果所有后续操作都要基于相同的透明度,就可以先把 globalAlpha 设置为适当
值,然后绘制,最后再把它设置回默认值 0。
第二个属性 globalCompositionOperation 表示后绘制的图形怎样与先绘制的图形结合。
WebGL 是针对 Canvas 的 3D 上下文。
WebGL是从 OpenGL ES 2.0 移植到浏览器中的,而 OpenGL ES 2.0 是游戏开发人员在创建计算机图形图像时经常使用的一种语言。WebGL 支持比 2D 上下文更丰富和更强大的图形图像处理能力。
WebGL 涉及的复杂计算需要提前知道数值的精度,而标准的 JavaScript 数值无法满足需要。为此,WebGL 引入了一个概念,叫类型化数组(typed arrays)。类型化数组也是数组,只不过其元素被设置为特定类型的值。
类型化数组的核心就是一个名为 ArrayBuffer 的类型。每个 ArrayBuffer 对象表示的只是内存中指定的字节数,但不会指定这些字节用于保存什么类型的数据。通过 ArrayBuffer 所能做的,就是为了将来使用而分配一定数量的字节。
创建了 ArrayBuffer 对象后,能够通过该对象获得的信息只有它包含的字节数,方法是访问其byteLength 属性:
使用 ArrayBuffer (数组缓冲器类型)的一种特别的方式就是用它来创建数组缓冲器视图。其中,最常见的视图是 DataView ,通过它可以选择 ArrayBuffer 中一小段字节。为此,可以在创建 DataView实例的时候传入一个 ArrayBuffer 、一个可选的字节偏移量(从该字节开始选择)和一个可选的要选择的字节数。
实例化之后, DataView 对象会把字节偏移量以及字节长度信息分别保存在 byteOffset 和byteLength 属性中。
类型化视图一般也被称为类型化数组,因为它们除了元素必须是某种特定的数据类型外,与常规的数组无异。
类型化数组是 WebGL 项目中执行各种操作的重要基础。
目前,主流浏览器的较新版本大都已经支持 canvas 标签。同样地,这些版本的浏览器基本上也都支持 2D 上下文。但对于 WebGL 而言,目前还只有 Firefox 4+和 Chrome 支持它。
这个跟JS关系不是很大,使用CSS来做的;如果你想让DIV跟随滚动条滚动,那么div的样式应该是 relative 或者 absolute 都可以的,看外层的DIV定位如果你想让DIV在屏幕上固定位置,则用 position:fixed 就可以;具体问题还得看你代码才行;
网站题目:javascript弧线,html绘制弧线
文章出自:https://www.cdcxhl.com/article12/dsicodc.html
成都网站建设公司_创新互联,为您提供网站设计公司、电子商务、网站导航、网站营销、网站建设、网页设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联