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(0, 0, 500, 500); //画圆第一个 context.beginPath(); //开始圆 context.arc(100, 400, 50, 0, 2 * Math.PI, true); //50半径,Math.PI圆的π,true顺时针 context.closePath(); // 关闭圆，然后回到起点 context.fillStyle = "rgba(255,0,0,0.5)"; //颜色，0.5透明度 context.fill(); //填充这个圆 for(var i = 0; i < 10; i++) { context.beginPath(); //开始圆 context.arc(i*30, i*30, i*10, 0, 2 * Math.PI, true); //50半径,Math.PI圆的π,true顺时针 context.closePath(); // 关闭圆，然后回到起点 context.fillStyle = "rgba(255,0,0,0.5)"; //颜色 context.fill(); //填充这个圆 } //椭圆 context.beginPath(); context.ellipse(400, 100, 20, 40, 0.5, 0, 2*Math.PI, true);//radiusX:x方向上半径,radiusY：x方向上半径,0.5:rotation：旋转角度 context.closePath(); context.fillStyle = "#06e"; context.fill(); </script> </body> </html>