首页 > web前端 > html/css/css3 > html5 canvas绘图之context.arc画圆(狐)实例
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-15

html5 canvas绘图之context.arc画圆(狐)实例

canvas绘图画圆是用一个arc方法,它是从一个中心坐标点,半径为长度,画出从开始角度到结束角度的圆。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

画圆(弧),画圆或者圆弧。x,y为圆心坐标,radius为半径,startAngle,endAngle为开始/结束划圆的角度,anticlockwise为是否逆时针画圆(True为逆时针,False为顺时针)。

<canvas id="demo-canvas" width="800" height="800">
您的浏览器不支持<canvas>,建议升级。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("demo-canvas");
if (canvas.getContext){
   var centext = canvas.getContext('2d');
   /* 圆 */
   context.beginPath();
   context.arc(70, 70, 60, 0, Math.PI*2, false);
   context.stroke();
   /* 10° ~ 80°,无填充 */
   context.beginPath();
   context.arc(230, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
   context.stroke();
   /* 10° ~ 80°,填充 */
   context.fillStyle = "rgba(0, 0, 200, 1)";
   context.beginPath();
   context.arc(400, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
   context.fill();
}
<script>

html5 canvas绘图之arc画圆(狐)实例

注意这里的角度为弧度制,所以如果画一个正圆的话,是0 -> Math.PI * 2,而画60°的话,就是0 -> 60 * Math.PI / 180.

html5 canvas绘图之arc画圆(狐)实例

 

进入html5 canvas绘图详细教程

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*