绘制图形

绘制矩形

矩形，是最基础的形状。canvas 提供了三种方法绘制矩形：

//填充绘制矩形
ctx.fillRect(x, y, width, height)
//描边绘制矩形
ctx.strokeRect(x, y, width, height)
//擦除矩形区域，相当于用白色底色填充绘制
ctx.clearRect(x, y, width, height)

绘制路径

路径，是另一种基础形状。通过控制笔触的坐标点，在画布上绘制图形。

与绘制矩形的直接绘制不同，绘制路径需要一些额外的步骤。

• 首先，需要创建路径起始点。
• 然后，你使用各种路径绘制命令去画出路径。此时路径是不可见的。
• 根据需要，选择是否把路径封闭。
• 通过描边或填充方法来实际绘制图形。为此，我们需要了解以下一些基本方法。

beginPath()

开始一条新路径，这是生成路径的第一步操作。

一条路径本质上是由多段子路径（直线、弧形、等等）组成。而每次调用 beginPath 之后，子路径清空重置，然后就可以重新绘制新的图形。

closePath()

闭合当前路径。

closePath() 不是必须的操作，相当于绘制一条当前位置到路径起始位置的直线子路径。

stroke()

描边绘制当前路径。

fill()

填充绘制当前路径。

当调用 fill() 时，当前没有闭合的路径会自动闭合，不需要手动调用 closePath() 函数。调用 stroke() 时不会自动闭合。

moveTo(x, y)

移动笔触。将当前路径绘制的笔触移动到某个坐标点。

相当于绘制一条真正不可见的子路径。通常用于绘制不连续的路径。

调用 beginPath() 之后，或者 canvas 刚创建的时候，当前路径为空，第一条路径绘制命令无论实际上是什么，通常都会被视为 moveTo。因此，在开始新路径之后建议通过 moveTo 指定起始位置。

路径绘制命令

路径绘制命令是实际绘制路径线条的一些命令。包括有：

• 绘制直线：lineTo
• 绘制圆弧：arc、arcTo
• 贝塞尔曲线：quadraticCurveTo、bezierCurveTo
• 矩形：rect这些命令都是用来绘制不同子路径的命令。具体的用途和参数，可以查阅 参考文档

组合使用

这里，我们展示一个组合使用的效果，绘制一个快应用的 logo。

drawCanvas () {
    const canvas = this.$element('newCanvas')
    const ctx = canvas.getContext('2d')
    const r = 20
    const h = 380
    const p = Math.PI
    ctx.beginPath()
    ctx.moveTo(r * 2, r)
    ctx.arc(r * 2, r * 2, r, -p / 2, -p, true)
    ctx.lineTo(r, h - r * 2)
    ctx.arc(r * 2, h - r * 2, r, p, p / 2, true)
    ctx.lineTo(h - r * 2, h - r)
    ctx.arc(h - r * 2, h - r * 2, r, p / 2, 0, true)
    ctx.lineTo(h - r, r * 2)
    ctx.arc(h - r * 2, r * 2, r, 0, -p / 2, true)
    ctx.closePath()
    ctx.stroke()
    const s = 60
    ctx.beginPath()
    ctx.moveTo(h / 2 + s, h / 2)
    ctx.arc(h / 2, h / 2, s, 0, -p / 2 * 3, true)
    ctx.arc(h / 2, h / 2 + s + s / 2, s / 2, -p / 2, p / 2, false)
    ctx.arc(h / 2, h / 2, s * 2, -p / 2 * 3, 0, false)
    ctx.arc(h / 2 + s + s / 2, h / 2, s / 2, 0, p, false)
    ctx.moveTo(h / 2 + s * 2, h / 2 + s + s / 2)
    ctx.arc(h / 2 + s + s / 2, h / 2 + s + s / 2, s / 2, 0, p * 2, false)
    ctx.moveTo(h / 2 + s / 4 * 3, h / 2 + s / 2)
    ctx.arc(h / 2 + s / 2, h / 2 + s / 2, s / 4, 0, p * 2, false)
    ctx.fill()
}

实现效果如下