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>