04 Canvas 基础用法

基础用法

属性介绍

<canvas> 标签只有两个可选的属性 width 和 height。当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。宽高属性会自动忽略单位，以像素展示，所以使用 em 或 rem 等单位无效。

在视觉表现上，CSS 的宽高属性权重要高于 <canvas> 标签的宽高权重。可以将 <canvas> 看作 <img> 元素，主要区别是 <canvas> 的等比例特性是强制的，会忽略 HTML 属性的设置，但 <img> 不会。

<img src="1.jpg" width="300" height="150" style="height:100px;" />
<canvas width="300" height="150" style="height:100px;"></canvas>

如上代码所示，此时 <img> 宽度不会随高度缩放，最终以 300x100 尺寸显示，而 <canvas> 宽度会按高度等比例缩放，以 200x100 尺寸显示。

需要注意：在使用 Canvas API 绘制图像时，是以 HTML 的宽高属性为原点，与 CSS 属性无关。

可以在 <canvas> 标签中提供替换内容。不支持的浏览器将会忽略容器并在其中渲染后备内容。

<canvas width="150" height="150">
  你的浏览器不支持 canvas，请升级你的浏览器
</canvas>

渲染上下文

<canvas> 标签创建画布，并公开渲染上下文（The rendering context），用来绘制内容。使用方法 getContext() 可以获取渲染上下文对象，该方法接受一个参数表示上下文格式，一般传入 2d，当然还有 3d 模式，这里不细谈。

const canvas = document.getElementById("yoo")
const ctx = canvas.getContext("2d")

绘制图形

绘制矩形

原生 canvas 只支持一种图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。canvas 提供了三种方法绘制矩形：

• fillRect(x, y, width, height)： 绘制一个填充矩形

• strokeRect(x, y, width, height)： 绘制一个矩形边框

• clearRect(x, y, width, height)： 清除指定矩形区域，使之变透明

三种方式示例如下：

ctx.fillStyle = "#fb618d"
ctx.fillRect(50, 50, 200, 200)
ctx.clearRect(70, 70, 160, 160)
ctx.strokeRect(90, 90, 120, 120)

三种方式绘制矩形

绘制路径

图形的基本元素是路径，使用路径绘制图形的步骤如下：

1. 创建路径起始点

2. 画出路径

3. 将路径封闭

4. 描边或填充路径区域

整个步骤需要使用一下函数：

1. beginPath()：新建一条新路径

2. closePath()：闭合路径

3. stroke()：通过线条来绘制图形轮廓

4. fill()：通过填充路径的内容区域生成实心图形

5. moveTo(x, y)：移动笔触到指定坐标

6. lineTo(x, y)：绘制一条从当前位置到指定坐标的直线

7. arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制圆弧，anticlockwise 为 true 时逆时针，默认为顺时针。

当 canvas 初始化或者 beginPath() 调用后，通常会使用 moveTo() 函数设置起点。或者使用该方法绘制不连续的路径。

示例 1：绘制三角形

// 填充三角形
ctx.beginPath()
ctx.moveTo(40, 40)
ctx.lineTo(220, 40)
ctx.lineTo(40, 220)
ctx.fill()

// 描边三角形
ctx.beginPath()
ctx.moveTo(260, 260)
ctx.lineTo(260, 80)
ctx.lineTo(80, 260)
ctx.closePath()
ctx.stroke()

注意到填充三角形和描边三角形有些不同，当路径使用填充 fill() 时会自动闭合，而使用描边 stroke() 时则不会闭合路径，所以需要调用 closePath() 方法。

绘制三角形

示例 2：绘制笑脸

ctx.beginPath()
ctx.moveTo(260, 150)
ctx.arc(150, 150, 110, 0, Math.PI * 2, true) // 脸
ctx.moveTo(220, 150)
ctx.arc(150, 150, 70, 0, Math.PI, false) // 嘴
ctx.moveTo(120, 110)
ctx.arc(110, 110, 10, 0, Math.PI * 2, false) // 左眼
ctx.moveTo(200, 110)
ctx.arc(190, 110, 10, 0, Math.PI * 2, false) // 右眼
ctx.stroke()

笑脸

贝塞尔曲线

canvas 里使用二次贝塞尔曲线和三次贝塞尔曲线可以用来绘制复杂的图形。

canvas API quadraticCurveTo(cp1x, cp1y, x, y)，用来绘制二次贝塞尔曲线，cp1x,cp1y 为控制点，x,y 为结束点。

二次贝塞尔曲线

canvas API bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)，用来绘制三次贝塞尔曲线，cp1x,cp1y 为控制点一，cp2x,cp2y 为控制点二，x,y 为结束点。

三次贝塞尔曲线

关于贝塞尔曲线的使用，这里不再细研究~~（看得头痛）~~，下次如有机会再说。

Path2D

之前所介绍的 canvas API 都是使用路径和绘画命令来把对象“画”在画布上，不能复用命令。较新的浏览器支持 Path2D 对象，用来缓存或记录绘画命令，这样可以复用路径，简化代码和优化性能。

Path2D() 会返回一个新初始化的 Path2D 对象，可能将某一个路径作为变量——创建一个它的副本，或者将一个包含 SVG path 数据的字符串作为变量。

new Path2D() // 空的Path对象
new Path2D(path) // 克隆Path对象
new Path2D("M10 10 h 80 v 80 h -80 Z") // 从SVG建立Path对象

之前介绍的所有 canvas API 都可以在生成的 Path2D 对象上使用。

const rectangle = new Path2D()
rectangle.rect(10, 10, 50, 50)

const circle = new Path2D()
circle.moveTo(125, 35)
circle.arc(100, 35, 25, 0, 2 * Math.PI)

ctx.stroke(rectangle)
ctx.fill(circle)