学习简单又不简单的 canvas

对不起，你的浏览器不支持画布，请升级浏览器

标签属性

---

• width：画布的宽度

• height: 画布的高度

• id：标签的 id 属性，用于 JS 获取元素

• 注意：width、height 属性虽然可以设置在 CSS 中，但是会出现变形和扭曲的现象，所以 如果想固定画布的宽高，直接设置在标签属性中。

JavaScript 渲染上下文

---

canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成

JavaScript 绘制步骤

---

• 通过 id 属性获取 canvas 元素

• 通过 canvas 元素的 getContext 方法获取上下文 context，图像将在上下文进行渲染，类似 PS 中的新建一个画布

• Canvas API 主要聚焦于 2D 图形，所以获取 2d 上下文

• 后期的绘制工作都是在 ctx 上下文进行的

Canvas 常见绘制方法

=======================================================================

坐标和栅格

---

• 栅格：canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中 的 1 像素。

• 坐标：栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。

笔触和填充

---

• Canvas 中的任何形状都是由这两个部分组成的。

• 笔触：也叫描边。

| 名称 | 方法 | 作用 |

| — | — | — |

| 笔触（描边） | ctx.stroke() | 通过线条来绘制图形轮廓，不会自动闭合路径 |

| 填充 | ctx.fill() | 通过填充路径的内容区域生成实心的图形，会自动闭合路径 |

图形的样式

---

Canvas 中绘制的路径，可以自定义颜色、描边宽度等样式设置

| 属性 | 属性值 | 作用 |

| — | — | — |

| ctx.lineWidth | 数字 | 设置描边的宽度为几像素 |

| ctx.fillStyle | 颜色值 | 设置填充颜色 |

| ctx.strokeStyle | 颜色值 | 设置描边颜色 |

绘制路径

---

• Canvas 中可以通过对应的方法绘制任意形状的路径。

• 路径绘制后，必须进行描边或填充才能在屏幕中显示。

• 路径的绘制需要多个方法配合完成。

| 方法 | 作用 |

| — | — |

| ctx.beginPath() | 新建一个路径的实例 |

| ctx.closePath() | 闭合路径 |

| ctx.moveTo(x, y) | 设置起始位置，将笔触移动到指定的坐标 x 以及 y 上。也可以绘制不连续的路径 |

| ctx.lineTo(x,y) | 绘制一条从当前位置到指定 x 以及 y 位置的直线 |

绘制矩形

---

绘制矩形的路径时，可以进行化简操作

| 方法 | 作用 | 参数 |

| — | — | — |

| ctx.fillRect(x, y, width, height) | 绘制一个填充的矩形 | x：绘制的水平起始位置；y：绘制的垂直起始位置；width：矩形的宽度；height：矩形的高度 |

| ctx.strokeRect(x, y, width, height) | 绘制一个矩形的边框 | 同上 |

| ctx.clearRect(x, y, width, height) | 清除指定矩形区域，让清除部分 完全透明。 一般用于清屏。 | 同上 |

绘制弧和圆形

---

• 绘制弧形或者圆形，我们使用 arc() 方法。

• 弧的制作属于路径，必须先 beginPath(),弧或圆形必须进行描边或填充才能进行显示。

| 方法 | 作用 | 参数 |

| — | — | — |

| ctx.arc(x, y, r, start, end, anticlockwise) | 绘制一个弧或圆形的路径 | x：圆心的水平位置 y：圆心的垂直位置 r：圆的半径 start：圆起始的角度（弧度） end：圆结束的角度（弧度） anticlockwise：设置绘制的方向，布 尔值，默认为false顺时针，true表示 逆时针方向 |

注意

• ctx.arc() 函数中表示角的单位是弧度，不是角度。

• 角度与弧度的 JS 表达式: 弧度 = (Math.PI / 180) * 角度。

• 1 弧度 ≈ 57°

• 特殊的角度，例如：

• 180° = Math.PI 弧度

• 360° = Math.PI * 2 弧度

绘制文本

---

Canvas 中绘制的文字，也可以设置文字的相关样式

| 方法和属性 | 作用 | 参数 |

| — | — | — |

| ctx.fillText(text, x, y [, maxWidth]) | 在指定位置填充文字 | text：绘制的文字内容 x：绘制的水平起始位置 y：绘制的垂直起始位置 maxWidth：可选，绘制的最大宽度 |

| ctx.strokeText(text, x, y [, maxWidth]) | 在指定位置绘制文字边框 | 同上 |

| ctx.font | 设置字体属性 | 属性值：”字号 字体” |

| ctx.textAlign | 设置文本对齐属性 | 属 性 值：start,end,left,right，center 默认值是 start |

Canvas 中的变形

=====================================================================

变形

---

• Canvas 中变形是一种强大的方法，可以将原点移动到另一点、对网格进行旋转和缩放。

移动

---

• ctx.translate(x, y) 可以移动原点的位置。

• x 是左右偏移量，y 是上下偏移量。

旋转

---

• ctx.rotate(angle) 可以以原点为中心旋转 canvas。 旋转的角度(angle)，它是顺时针方向的，以 弧度为单位的值。

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。