如何在HTML5画布上绘制矩形？

HTML5 <canvas>标签用于使用脚本绘制图形，动画等。这是HTML5中引入的新标签。canvas元素具有一个称为getContext的DOM方法，该方法获取渲染上下文及其绘图功能。此函数采用一个参数，即上下文2d的类型。

要使用HTML5画布绘制矩形，请使用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>

基础教程