javascript画弧,任意弧的画法

百度地图javascript api 中如何画圆弧

你可以用添加/删除覆盖物这个API试试

创新互联主营天水网站建设的网络公司,主营网站建设方案,手机APP定制开发,天水h5微信小程序开发搭建,天水网站营销推广欢迎天水等地区企业咨询

// 百度地图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 绘制 带箭头的 弧线

纯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

复制进来的代码都不带缩进的吗?

该代码纯手写,不从第三方处盗用.仅供参考.

js或canvas中,如何把线顺时针转动,然后转动过的地方填充,慢慢地从扇形填充成圆形?

html

head

meta charset="utf-8"

/head

body

canvas id="cvs" width="200" height="200"/canvas

script

//扇形对象

CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {

// 初始保存

this.save();

// 位移到目标点

this.translate(x, y);

this.beginPath();

// 画出圆弧

this.arc(0,0,radius,sDeg, eDeg);

// 再次保存以备旋转

this.save();

// 旋转至起始角度

this.rotate(eDeg);

// 移动到终点，准备连接终点与圆心

this.moveTo(radius,0);

// 连接到圆心

this.lineTo(0,0);

// 还原

this.restore();

// 旋转至起点角度

this.rotate(sDeg);

// 从圆心连接到起点

this.lineTo(radius,0);

this.closePath();

// 还原到最初保存的状态

this.restore();

return this;

}

//执行

function start(degrees){

var ctx = document.getElementById('cvs').getContext('2d');

degrees++;

ctx.sector(100,100,50,0,Math.PI/180*degrees).fill();

if(degrees360){

setTimeout('start('+degrees+')',10);

}else{

alert('画完了')

}

}

start(1)

/script 

/body

/html

用JavaScript做角度转弧度，要做成网站

!DOCTYPE HTML

html

head

meta charset="utf-8" /

title角度转弧度/title

script

var ck = function() {

try {

b.value = eval("Math.PI*" + a.value + "/180");

} catch (e) {

alert("角度输入不正确");

a.focus();

a.select();

}

}

/script

/head

body角度：

input type="text" id="a" /弧度：

input type="text" id="b" /

input type="button" value="转换" onclick="ck()" /

/body

/html

使用svg和js画一个圆环

var path = svgdoc.createElement("path");

path.setAttribute("d","M400 400 L400 300 A400 400 90 0 1 500 400 Z");

path.setAttribute("style","fill:none;stroke:#00f;stroke-width:2");

svgdoc.rootElement.appendChild(path);

这个代码是画四分之一个圆，圆环你自己算下坐标，用PATH画，A是画弧线的

path的相关知识，你百度你里面看下，这里就不多说了

关于arcTo

HTML canvas arcTo() 方法

Canvas 对象参考手册 Canvas 对象

实例

在画布上创建介于两个切线之间的弧：

JavaScript：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20,20);          // 创建开始点

ctx.lineTo(100,20);          // 创建水平线

ctx.arcTo(150,20,150,70,50); // 创建弧

ctx.lineTo(150,120);        // 创建垂直线

ctx.stroke();                // 绘制

尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Chrome 和 Safari 支持 arcTo() 方法。

注意：Opera 不支持 arcTo() 方法。

注意：Internet Explorer 8 及之前的版本不支持 canvas 元素。

定义和用法

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

提示：请使用 stroke() 方法在画布上绘制确切的弧。

JavaScript 语法：    context.arcTo(x1,y1,x2,y2,r);

参数值

参数    描述

x1    弧的起点的 x 坐标。

y1    弧的起点的 y 坐标。

x2    弧的终点的 x 坐标。

y2    弧的终点的 y 坐标。

r    弧的半径。