HTML5之canvas-2圆 椭圆

前端开发   发布日期:2025年07月17日   浏览次数:126

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)

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>圆-椭圆</title>
  4. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  5. </head>
  6. <body>
  7. <canvas id="canvas" width="500" height="500"></canvas>
  8. <script type="text/javascript">
  9. var oCanvas = document.getElementById("canvas");
  10. var context = oCanvas.getContext("2d");
  11. context.fillStyle = "#ededed";
  12. context.fillRect(, , , );
  13. //画圆第一个
  14. context.beginPath(); //开始圆
  15. context.arc(, , , , * Math.PI, true); //50半径,Math.PI圆的π,true顺时针
  16. context.closePath(); // 关闭圆,然后回到起点
  17. context.fillStyle = "rgba(255,0,0,0.5)"; //颜色,0.5透明度
  18. context.fill(); //填充这个圆
  19. for(var i = ; i < ; i++) {
  20. context.beginPath(); //开始圆
  21. context.arc(i*, i*, i*, , * Math.PI, true); //50半径,Math.PI圆的π,true顺时针
  22. context.closePath(); // 关闭圆,然后回到起点
  23. context.fillStyle = "rgba(255,0,0,0.5)"; //颜色
  24. context.fill(); //填充这个圆
  25. }
  26. //椭圆
  27. context.beginPath();
  28. context.ellipse(, , , , 0.5, , *Math.PI, true);//radiusX:x方向上半径,radiusY:x方向上半径,0.5:rotation:旋转角度
  29. context.closePath();
  30. context.fillStyle = "#06e";
  31. context.fill();
  32. </script>
  33. </body>
  34. </html>

 

以上就是HTML5之canvas-2圆 椭圆的详细内容,更多关于HTML5之canvas-2圆 椭圆的资料请关注九品源码其它相关文章!