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>