说说如何使用 Canvas 绘制基本矩形

绝地灬酷狼 2023-02-17 12:30 22阅读 0赞

HTML5 提供的 canvas 元素，可以让我们使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，我们可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这次先说说如何绘制基本矩形。

## 1 搭建 Canvas 2D 环境 ##

**（1）引入 `<canvas>` 标签**

在 HTML 的 `<body>` 中新增一个 `<canvas>` 标签。形如：

`<canvas>` 标签有以下3个主要属性。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>标识该 <code>&lt;canvas&gt;</code> 标签。</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>画布宽度，以像素为单位 。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>画布高度，以像素为单位 。</td> 
  </tr> 
 </tbody> 
</table>

**（2）获取 Canvas 对象以及 2D 环境**

利用下面的代码，就可以获取 Canvas 对象的 2D 环境。

let theCanvas = document.querySelector("#canvas");
    let context = theCanvas.getContext("2d");

这样， Canvas 2D 环境就搭建好了，我们可以开始绘图啦O(∩\_∩)O

## 2 Canvas 坐标体系 ##

Canvas 中的坐标体系是以左上角（ 0 ， 0 ）为原点的 windows 窗体和 svg 也是如此。这样设计主要是因为过去标准的 CRT 监视器是从上到下、从左到右来显示图像的。

![format_png][]

## 3 绘制基本矩形 ##

绘制基本矩形有 3 种不同方式，它们分别是填充、描边以及清除。

**（1）填充**

利用 fillRect() 方法，就可以绘制填充矩形。 fillRect() 方法提供以下入参：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>矩形左上角的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>矩形左上角的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>矩形的宽度，以像素计</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>矩形的高度，以像素计</td> 
  </tr> 
 </tbody> 
</table>

//绘制填充矩形
        context.fillStyle = '#3498db';
        context.fillRect(20, 20, 145, 85);
    
        context.fillStyle = '#1bbc9d';
        context.fillRect(200, 20, 145, 85);
    
        context.fillStyle = '#dd7195';
        context.fillRect(380, 20, 145, 85);

运行结果：  
![format_png 1][]

fillStyle 属性用于指定填充的颜色，颜色使用 RGB 来指定。

**（2）描边**

利用 strokeRect() 方法，可以绘制描边矩形。 strokeRect() 方法提供以下入参：

context.lineWidth = 1;
        context.strokeStyle = '#3498db';
        context.strokeRect(20, 200, 145, 85);
    
        context.strokeStyle = '#1bbc9d';
        context.strokeRect(200, 200, 145, 85);
    
        context.strokeStyle = '#dd7195';
        context.strokeRect(380, 200, 145, 85);

运行结果：

![format_png 2][]

strokeStyle 属性用于指定边线的颜色；lineWidth 用于指定边线宽度。

**（3）清除**

clearRect() 方法用于清除指定矩形区域，让其完全透明，一般用于制作特殊图示。它拥有以下属性：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>要清除的矩形左上角的 x 坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>要清除的矩形左上角的 y 坐标</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>要清除的矩形的宽度，以像素计</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>要清除的矩形的高度，以像素计</td> 
  </tr> 
 </tbody> 
</table>

context.fillStyle = '#3498db';
        context.fillRect(20, 350, 550, 60);
        //指定区域透明
        for (let i = 1; i < 20; i++) {
            let x = 30 * i;
            console.log('x -> ' + x);
            context.clearRect(x, 350, 10, 10);
        }

运行结果：

![format_png 3][]

在实心矩形中，通过清除多个透明矩形区域，就可以制作出这样的城墙图示啦O(∩\_∩)O

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LWU0MTJmNmFhMTFlZmRlNWIucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTI1OTUxYjM3YjQ4NjcwOWIucG5n?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTJhMjcxZjZlZTUyMmQxNDIucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zMzg2MTA4LTkzMDZkOGZkNDJiYTJjYzMucG5n?x-oss-process=image/format,png