最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作。我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识。
首先看这段代码:
var ctx=document.getElementById("canvas").getContext("2d");
/*这是调用HTMLCanvasElement对象的getContex方法,为画布返回绘图上下文,这里是采用2d上下文
ctx.fillStyle="yellow";
ctx.strokeStyle="black";
/*这两句代码是设置填充和笔触样式,这里就是为你绘制图形填充颜色,实心的就调用fillStyle,空心的就调用strokeStyle,相对应的图形文字的实心空心样式就不提了
ctx.lineWidth=3;
/*这是用于绘制线条的宽度
ctx.strokeRect(250,20,100,200);
/*这是绘制一个空心的矩形,第一个参数和第二个参数表示从canvas元素左上角算起的偏移值,后两个参数代表矩形的宽和高。
/*接下来就是用路径绘图的部分了,稍微提一下绘制一条路径的基本顺序:
调用beginPath方法;
用moveTo方法移动起点;
用arc和lineTo等方法绘制子路径;
调用closePath方法(可选),这个方法主要用于闭合所画的路径
调用fill和stroke方法,这里是填充,上面提到的closePath会对stroke绘制的线条有影响*/
/*这里是调用arc方法绘制圆弧,也是本文的重点哦
ctx.beginPath();
ctx.arc(70,70,60,0,Math.PI*2,true);
/*这里要注意canvas里面的角度并不是用数学里面的度数来表示的而是用弧度,例如360度就是2*Math.PI
ctx.stroke();
ctx.fill();
看上面这段代码,首先讲讲arc的参数。arc(x,y,rad,startAngle,endaAngle,direction),x,y代表的圆弧的圆心,第三个参数代表圆弧的半径,第四个代表起始的角度,第五个代表结束的角度,最后一个代表圆弧的方向,这里默认的是顺时针方向。值得注意的是,这里direction参数的意思是是否是逆时针方向,所以当把这个参数设为true时,就变成了逆时针方向。这其中的区别后面详细讲解
上面这段实际上是画了一个整圆
注意,这里的起始角度和数学里面差不多,你把你的圆当一个坐标以圆心为原点,0就是X轴的正半轴开始
这里的最后一个参数为true时,表示逆时针方向,第四个参数和第五个参数表示从90度到180度,注意这里的角度起始点和终止点还是按照普通坐标轴的顺时针来的(这里不要跟数学里的搞混了,例如Y轴的负半轴表示2/Math.PI,X负半轴表示Math.PI.逆时针方向表示的意思是弧度的方向,就如同下图中线条的方向。
ctx.beginPath();
ctx.arc(200,70,60,Math.PI/2,Math.PI,true);
ctx.fill();
ctx.stroke();
演示一个为false的
ctx.beginPath();
ctx.arc(200,70,60,Math.PI/2,Math.PI,flase);
ctx.fill();
ctx.stroke();
这些都掌握了,就可以利用一些技巧来绘制一些有意思的图形了,例如:
ctx.beginPath();
var val=0;
for(var i=0;i<5;i++){
ctx.arc(350,70,60,val,val+Math.PI/4,false);
val+=Math.PI/2;
}
ctx.closePath;
ctx.fill();
ctx.stroke();
/*这个图形就是把整个圆分为四部分,在循环里面每次移动2/Math.PI,而这每一个2/Math.PI又分为两部分,一半绘制弧形,一半为直线。*/