如何在HTML5画布中绘制椭圆？

前端开发教程 2025-02-10 0

您可以尝试运行以下代码在 HTML5 画布中绘制椭圆形 –

示例

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
      <canvas id=newCanvas width=450 height=300></canvas>
      <script>
         // canvas

         var c = document.getElementById('newCanvas');
         var context = c.getContext('2d');
         var cX = 0;
         var cY = 0;
         var radius = 40;
         
         context.save();
         context.translate(c.width / 2, c.height / 2);
         context.scale(2, 1);
         context.beginPath();
         context.arc(cX, cY, radius, 0, 2 * Math.PI, false);
         context.restore();
         context.fillStyle = '#000000';
         context.fill();
         context.lineWidth = 2;
         context.strokeStyle = 'yellow';
         context.stroke();
      </script>
   </body>
</html>

输出

以上就是如何在HTML5画布中绘制椭圆？的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。