[html5]用html5来canvas绘制圆形的实例代码参考
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是否按顺时针方向进行绘制。
- <!DOCTYPE html>
- <meta charset="utf-8">
- <head>
- </head>
- <body>
- <canvas id="yuanxing" width="1000" height="1000"></canvas>
- <script type=text/javascript>
- var canvas=document.getElementById("yuanxing");
- var context=canvas.getContext("2d");
- context.fillStyle="#FF0000";
- context.beginPath();
- context.arc(700,400,200,0,Math.PI*2,true); //cuplayer.com提示：Math.PI*2是JS计算方法，是圆
- context.closePath();
- context.fill();
- </script>
- </body>
- </html>
热门文章推荐
- 10款html5网页播放器推荐（总有一款适合你）
- [html5]html5+css3实现图片斜角切成直角梯形显示的源代码
- [HTML5]HTML5视频video时间事件代码
- [微信]iOS苹果和微信中音频和视频实现自动播放的方法
- [html5]html5视频全屏实现的源代码
- [Html5]mobile-agent移动Agent,就是具有移动性的智能Agent
- [html5]视频播放器js控制vedio视频和分段播放
- [html5]H5播放器：竖屏播放\横屏播放\跟随旋转例子
请稍候...
