Context.beginPath();
Context.arc(x,y,radius,startAngle,endAngle,anticlockwise);(for循环圆心、半径)
Context.closePath();
Context.fillStyle=’rgba(255,0,0,0.25)’
Context.fill()
ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise)
<head>
<meta charset="UTF-8">
<title>圆-椭圆</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var oCanvas = document.getElementById("canvas");
var context = oCanvas.getContext("2d");
context.fillStyle = "#ededed";
context.fillRect(, , , );
//画圆第一个
context.beginPath(); //开始圆
context.arc(, , , , * Math.PI, true); //50半径,Math.PI圆的π,true顺时针
context.closePath(); // 关闭圆，然后回到起点
context.fillStyle = "rgba(255,0,0,0.5)"; //颜色，0.5透明度
context.fill(); //填充这个圆
for(var i = ; i < ; i++) {
context.beginPath(); //开始圆
context.arc(i*, i*, i*, , * Math.PI, true); //50半径,Math.PI圆的π,true顺时针
context.closePath(); // 关闭圆，然后回到起点
context.fillStyle = "rgba(255,0,0,0.5)"; //颜色
context.fill(); //填充这个圆
}
//椭圆
context.beginPath();
context.ellipse(, , , , 0.5, , *Math.PI, true);//radiusX:x方向上半径,radiusY：x方向上半径,0.5:rotation：旋转角度
context.closePath();
context.fillStyle = "#06e";
context.fill();
</script>
</body>
</html>
以上就是HTML5之canvas-2圆 椭圆的详细内容，更多关于HTML5之canvas-2圆 椭圆的资料请关注九品源码其它相关文章！