图文详解如何用canvas画实心圆和空心圆

　　HTML5中的canvasarc（）可以用来创建圆，首先和大家讲讲arc（）的语法及参数设置

　　语法：arc(x,y,r,sAngle,eAngle,counterclockwise)

　　x表示圆中心的X轴坐标

　　y表示圆中心的Y轴坐标

　　r表示圆的半径

　　sAngle表示圆的起始角，按弧度计算，0度在园的三点钟位置

　　eAngle表示园的结束角，以弧度计。

　　counterclockwise是一个可选值，它规定了画圆的方向，是顺时针还是逆时针，False是顺时针，true是逆时针

　　注：用arc()来创建圆，需要将起始角设置为0，结束角设置为2*Math.PI

　　画圆的角度可以参考下图：

　　arc.gif

　　实例1：用canvas画一个空心圆，代码如下：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#000;">

　　</body>

　　<scripttype="text/javascript">

　　varc=document.getElementById("myCanvas");//找到<canvas>元素:

　　varctx=c.getContext("2d");//创建context对象

　　ctx.beginPath();//标志开始一个路径

　　ctx.arc(100,50,40,0,2*Math.PI);//在canvas中绘制圆形

　　ctx.stroke()

　　</script>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54451.shtml