·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]用html5来canvas绘制圆形的实例代码参考

时间:2014-12-18 08:55酷播
x为圆形起点的横坐标,y为圆形起点的纵坐标,radius为圆形半径,startAngle为开始角度,endAngle为结束角度,anticlockwise是否按顺时针方向进行绘制

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); //cuplayer.com提示:Math.PI*2是JS计算方法,是圆 
  14. context.closePath(); 
  15. context.fill(); 
  16. </script> 
  17. </body> 
  18. </html> 

 

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器