Web API：用 Canvas API 绘制矩形（快速入门）

目录

Canvas 绘制矩形

HTML 代码

如何绘制一个矩形

抬笔 与 落笔

---

Canvas 绘制矩形

HTML 代码

<canvas id="c1" width="600" height="600"></canvas>

如何绘制一个矩形

绘制矩形可以分为3步：

1. 找到画布
2. 获取画布
3. 绘制矩形
   1. 填充模式

   

                2. 路径模式

                3. 删除模式 

// 找到画布
var c1 = document.querySelector('#c1')
// 获取画笔，上下文对象
var ctx = c1.getContext('2d')
// 绘制矩形
    // 绘制填充模式的矩形
    ctx.fillRect(100,100,200,200)
    // 绘制路径模式的矩形
    ctx.strokeRect(100,100,200,300)

    // 删除模式
    // 清空画布，我这里注释掉了，打开后，前面画布绘制的内容将是空白，因为删除掉了
    // ctx.clearRect(0, 0, c1.clientWidth, c1.clientHeight) 

抬笔 与 落笔

在绘制多个矩形时，我们可能会用到不同模式画出不能的矩形，但是如果我们不进行抬笔与落笔的话，绘制的矩形只能显示你最后设置的模式，所以我们需要运用到抬笔和落笔

// 以上找到画布，获取画布的内容我省略了

// 绘制矩形
ctx.beginPath() // 抬笔
ctx.strokerect(100, 100, 200, 100)
ctx.closePath() // 落笔

ctx.beginPath() // 抬笔
ctx.fillrect(200, 150, 200, 100)
ctx.closePath() // 落笔