2018/2/24 canvas知识三_快速创建描边矩形和填充矩形案例-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_38589469/article/details/79365360

本文介绍如何使用HTML5 Canvas API中的rect(), strokeRect() 和 fillRect() 方法来创建、填充及清除矩形。通过实例演示了这些方法的具体用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.快速创建矩形rect()方法

语法：ctx.rect(x, y, width, height);
解释：x, y是矩形左上角坐标， width和height都是以像素计
rect方法只是规划了矩形的路径，并没有填充和描边。
改造案例：04填充矩形.html
rect: abbr. 矩形（rectangular）；收据（receipt）

2.快速创建描边矩形和填充矩形

语法： ctx.strokeRect(x, y, width, height);
参数跟1.相同，注意此方法绘制完路径后立即进行stroke绘制
语法：ctx.fillRect(x, y, width, height);
参数跟1.相同， 此方法执行完成后。立即对当前矩形进行fill填充。

3. 清除矩形(clearRect)

语法：ctx.clearRect(x, y, width, hegiht);
解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>01Canvas案例-</title>
   </head>
<body>

   <div id="container">
      <canvas id="cavsElem">
         你的浏览器不支持canvas，请升级浏览器
      </canvas>
   </div>

   <script>
      (function(){
         var canvas = document.querySelector( '#cavsElem' );
         var ctx = canvas.getContext( '2d' );

         canvas.width = 600;
         canvas.height = 600;
         canvas.style.border = "1px solid #000";
         // 前两个参数是:矩形的x,y坐标，　后面两个参数：矩形的宽高
         //ctx.rect(x,y,w,h);
         ctx.rect(100,100,50,50);
         ctx.stroke();

         //描边矩形
         ctx.strokeRect(200, 200, 100, 150);

         //填充矩形
         ctx.fillRect(300, 300, 40, 40);
      }());
      
   </script>
</body>
</html>

效果展示：