首頁 >web前端 >html教學 >如何在HTML5畫布中繪製橢圓？

如何在HTML5畫布中繪製橢圓？

WBOY轉載: 2023-08-31 17:41:051160瀏覽

您可以嘗試執行下列程式碼在 HTML5 畫布中繪製橢圓形 -

範例

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

         var c = document.getElementById(&#39;newCanvas&#39;);
         var context = c.getContext(&#39;2d&#39;);
         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 = &#39;#000000&#39;;
         context.fill();
         context.lineWidth = 2;
         context.strokeStyle = &#39;yellow&#39;;
         context.stroke();
      </script>
   </body>
</html>

輸出

如何在HTML5畫布中繪製橢圓？

以上是如何在HTML5畫布中繪製橢圓？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：WordPress 操作與篩選器：了解區別下一篇：WordPress 操作與篩選器：了解區別

看更多