canvas绘制圆形

canvas绘制圆形的思路：

1、创建路径 XXX.beginpath();

2、创建圆形的路径；

3、关闭路径；XXX.closepath(); 路径不关闭也能绘制出图形

4、设定绘制样式。

 

创建圆形路径时需要用到对象的arc方法，方法定义如：XXX.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x为圆形起点的横坐标，y为圆形起点的纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise是否按顺时针方向进行绘制。

 1 <!DOCTYPE html>
 2 <meta charset="utf-8">
 3 <head>
 4 </head>
 5 
 6 <body>
 7 <canvas id="yuanxing" width="1000" height="1000"></canvas>
 8 <script type=text/javascript>
 9 var canvas=document.getElementById("yuanxing");
10 var context=canvas.getContext("2d");
11 context.fillStyle="#FF0000";
12 context.beginPath();
13 context.arc(700,400,200,0,Math.PI*2,true); //Math.PI*2是JS计算方法，是圆
14 context.closePath();
15 context.fill();
16 </script>
17 </body>
18 </html>
posted @ 2012-09-03 17:25  yexingwen  阅读(13330)  评论(0)  编辑  收藏  举报