如何使用 HTML5 Canvas 绘制星星?

htmlweb developmentfront end technology更新于 2024/1/22 0:12:17

在 HTML Canvas 上绘图需要使用 JavaScript。在 Canvas 上绘图之前，请使用 HTML DOM 方法 getElementById() 和 getContext()。要在 HTML 中绘制星星，请使用 Canvas 元素。

使用 Canvas，使用 lineTo() 方法绘制星星。lineTo() 方法包含 x 和 y 参数值，用于定位线条以帮助您绘图。

在 HTML 文档中绘制 Canvas:

示例

您可以尝试运行以下代码，使用 HTML5 Canvas 绘制一颗星星

<!DOCTYPE HTML>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   <body>
      <canvas id="newCanvas" width="300" height="250"></canvas>
      <script>
         var canvas = document.getElementById('newCanvas');
         var ctx = canvas.getContext('2d');
         ctx.fillStyle = "blue";
         ctx.beginPath();
         ctx.moveTo(108, 0.0);
         ctx.lineTo(141, 70);
         ctx.lineTo(218, 78.3);
         ctx.lineTo(162, 131);
         ctx.lineTo(175, 205);
         ctx.lineTo(108, 170);
         ctx.lineTo(41.2, 205);
         ctx.lineTo(55, 131);
         ctx.lineTo(1, 78);
         ctx.lineTo(75, 68);
         ctx.lineTo(108, 0);
         ctx.closePath();
         ctx.fill();
      </script>
   </body>
</html>