如何在 HTML5 Canvas 上绘制矩形?

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

HTML5 的 <canvas> 标签用于通过脚本绘制图形、动画等。它是 HTML5 中引入的新标签。canvas 元素有一个名为 getContext 的 DOM 方法，用于获取渲染上下文及其绘制函数。此函数接受一个参数，即上下文的类型(2d)。

要使用 HTML5 Canvas 绘制矩形，请使用 fillRect(x, y, width, height) 方法:

您可以尝试运行以下代码来学习如何使用 HTML5 Canvas 绘制矩形

示例

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   
   <body>
      <canvas id="newCanvas" width="200" height="100" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>