宜昌本地软件开发与弱电工程服务商
项目咨询 · 快速响应
您当前的位置： > 博客2 > Html5技术

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

2016-10-13 00:16:48 点击量:8 标签: 收藏本文

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> 

 

上一篇： [html5]一个用html5的canvas写的“转盘”
下一篇： [html5]HTML5中与html的语法变化和新增加元素说明
ABOUT US
宜昌农人网络科技有限公司

我们是一家提供综合软件外包与弱电工程服务的技术公司。

业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。

公司地址：湖北省宜昌市伍家岗区东站二路6号三峡（宜昌）大数据产业园海洋馆二楼A203室