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>
版权声明:除特别声明外,本站所有文章皆是本站原创,转载请以超链接形式注明出处!