canvas详解---绘制弧线

时间 2019-11-24

标签 canvas 详解绘制弧线繁體版

原文原文链接

Draw an archtml

context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false);canvas

参数一是圆心的x坐标值，参数二是圆心y轴坐标值，参数三是半径，参数四是起始弧度，参数五十终止弧度，最后一个参数表示的绘制方向，默认的是false表示的是顺时针的方向。若是是true表示的是逆时针方向。3d

注意了弧度制都是固定好了。如上图所示htm

请看下面的一段程序blog

<!DOCTYPE html>
<html>
<head>
<title>canvas详解</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="red";
context.arc(100,100,50,0,1.5*Math.PI);
context.stroke();接口

</script>
</body>
</html>ip

结果显示：get

若是在context.arc(100,100,50,0,1.5*Math.PI,true);表示的是逆时针从0度到1.5PI处，结果以下图it

因此从上面的例子能够看出，弧度值是固定的，不是说顺时针画时就以顺时针的方向来看，逆时针画时就以逆时针的方向来看。这一点千万要注意。程序

再来看一个程序

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="red";
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.stroke();
}

结果显示以下：

这时候你们会感到奇怪了，为何画出来的是一个封闭的图形呢？

其实这是closePath另一个做用了，当前咱们绘制的路径不是封闭的路径时，closePath()会将自动路径封闭。

若是这样的话

for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.stroke();
}

生成的就是一段段的弧，不会是封闭的了。

并且咱们使用了beginPath(),canvas会知道咱们是从新画一条，若是给这几条设置不一样的属性也是能够的。

接下来在看一个问题

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.fillStyle="red";
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.fill();
}

若是是这样的话，结果会是填充的几个弧形

，若是咱们去掉了closePath(),结果也会是同样的。

为何呢？

由于若是调用了fill()的话，canvas会自动的找寻首尾而后将其链接起来，而后在填充。

canvas还有很对绘制接口，我将在下一张具体讲解canvas的其余知识。