Enzyme ShallowWrapper `.simulateError()` 详解：在浅渲染中模拟 React 错误边界触发与验证
2026/9/21 1:56:15
做前端的人应该都有过这种体验：在项目里碰上图形绘制需求，第一反应是去找图表库，结果需求只是“画一个简单的形状”，引个库还要考虑体积、打包、样式覆盖，最后还不如自己用 Canvas 手写几下。直角梯形（向右）就是这类很典型的需求，比如做步骤条、流程图里的数据块、进度指示器，甚至大屏项目里的装饰性背景块。代码量不大，但里面有几个坑，没踩过的人往往要折腾很久。
这篇文章我会先用最直观的方式拆解右边直角的直角梯形到底怎么定位、怎么落笔，再给出一套坐标计算公式，最后把我在实际项目中遇到的模糊、变形、状态污染这几个问题连同解决方案一起整理出来。不管你是刚接触 Canvas 的小白，还是写过一些图形但没系统梳理过路径绘制逻辑的前端，这篇文章都值得收藏。
1. 直角梯形到底在画什么
1.1 几何定义与“向右”的坐标含义
先聊一个基础问题：直角梯形是什么？教科书上的定义是“有一个角是直角的梯形”。可放到 Canvas 里，这个定义不够直接，因为你得先知道四个顶点的坐标，Canvas 才能帮你连线。所以做前端图形绘制，第一步不是背定义，而是把几何描述翻译成坐标。
标题里特别强调“向右”，指的是梯形斜边靠在左侧、直角出现在右侧。说得再具体一点：右边那条边是垂直的，左边那条边是斜的。看起来是个很小的细节，但它直接决定了四个顶点的相对位置，写错一个点，画出来的就是个奇奇怪怪的四边形。
我用实际项目里的一个数据来说话。假设画布是 200 宽、120 高，我要画一个上底 40、下底 80、高度 60 的向右直角梯形。这里的“上底”和“下底”是两条平行的水平边，上面那条短、下面那条长。因为直角在右边，所以右边的垂直边是连接上底右端点和下底右端点的那条线，它的长度就是梯形的高 60。左边的斜边从上底左端点斜向下延伸到底边左端点。
理解了这层关系，四个顶点的位置就清楚了：
- 左上角：上底左端点
- 右上角：上底右端点
- 右下角：下底右端点
- 左下角：下底左端点
这个形状像一块向右倾斜的积木，右边的直角非常明显，左边的斜边则把上下两条底边连接起来。
1.2 坐标系从哪里开始：Canvas 画布的坐标逻辑
要把顶点坐标算出来，必须先搞清楚 Canvas 的坐标系。很多新手栽跟头，就是因为把它和数学课上的直角坐标系搞混了。
Canvas 的坐标系原点在画布左上角，x 轴向右为正，y 轴向下为正。什么意思呢？在数学坐标系里，y 值越大点越靠上；在 Canvas 里，y 值越大点越靠下。同一个梯形，如果拿数学系的思路去算坐标，画出来大概率是上下颠倒的。
给个具体例子：画布左上角是 (0,0)，右下角是 (200,120)。如果我把上底画在 y=30 这条水平线上，下底画在 y=90 这条水平线上，那么上底在视觉上位于下底的上方。从 y 值来看，上底是 30，下底是 90，数值上上底更小——这跟数学坐标系里“上面的点 y 值更大”刚好相反。
所以记住一条铁律：在 Canvas 里，y 值增大是往下走。所有顶点坐标的计算，都要带着这个前提去推。
还有一点容易被忽略：Canvas 的坐标单位是像素，而且默认情况下 1 个单位就是 1 个物理像素。在小屏幕上看着没问题，一旦遇到高 DPI 的屏幕（比如 iPhone 的 Retina 屏），Canvas 会按 CSS 像素缩放，导致绘制结果发虚。这个问题后面避坑章节我会展开讲，这里先有个印象即可。
2. 手把手画出第一个向右直角梯形
2.1 从“moveTo”到“closePath”的路径三件套
Canvas 绘图的基本单位是路径。你可以把路径想象成一支笔在纸上移动的轨迹，笔尖落下开始画，抬起来停止画。Canvas 里控制这支笔的核心方法就三个：moveTo、lineTo、closePath。
moveTo(x, y)：把笔抬起来，移动到指定坐标。不产生任何线条。lineTo(x, y)：从当前笔尖位置画一条直线到指定坐标。closePath()：把当前路径的终点和起点连起来，形成闭合图形。
画一个梯形，就是先用moveTo定位到第一个顶点，然后用lineTo依次连到另外三个顶点，最后用closePath闭合。调用顺序决定了画出来的形状，调错顺序画出来的就是一个交叉图形。
我这里用 CDN 方式写一个可直接运行的 HTML 文件，方便你直接复制到本地看效果。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Canvas 直角梯形（向右）</title> <style> canvas { border: 1px solid #ccc; display: block; margin: 20px auto; } </style> </head> <body> <canvas id="canvas" width="200" height="120"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 梯形参数 var topY = 30; // 上底的 y 坐标 var bottomY = 90; // 下底的 y 坐标 var topLeftX = 20; var topRightX = 60; // 上底 = 60 - 20 = 40 var bottomLeftX = 10; var bottomRightX = 90; // 下底 = 90 - 10 = 80 ctx.beginPath(); ctx.moveTo(topLeftX, topY); // 1. 左上角 ctx.lineTo(topRightX, topY); // 2. 右上角 ctx.lineTo(bottomRightX, bottomY); // 3. 右下角 ctx.lineTo(bottomLeftX, bottomY); // 4. 左下角 ctx.closePath(); ctx.fillStyle = '#4A90D9'; ctx.fill(); ctx.strokeStyle = '#2C3E50'; ctx.lineWidth = 2; ctx.stroke(); </script> </body> </html>这份代码画出来的就是一个直角在右边的直角梯形。流程非常直白：
beginPath()开始定义一条新路径。moveTo(20, 30)把笔尖定位到左上角。lineTo(60, 30)画上底，到右上角。lineTo(90, 90)沿右侧垂直边画到底，这里 x 没变，所以是一条竖线。lineTo(10, 90)画下底。closePath()从左下角自动连回左上角，完成左边斜边。fill()填充内部颜色，stroke()描边。
注意一个细节：moveTo(20,30)到lineTo(60,30)这条线是水平方向，宽度 40，这就是上底。lineTo(90,90)从 (60,30) 直线连到 (90,90)，这条线既有水平位移又有垂直位移，不是我们关心的直角边。真正垂直的是lineTo(60,30)到lineTo(90,90)这段吗？不是。仔细看代码：第二个lineTo是 (60,30) 到 (90,90)，这是一条斜线。第三个lineTo是 (90,90) 到 (10,90)，是水平线。直角在哪里？
这里需要停下来重新理一下。之前的描述里我说“右边的垂直边是连接上底右端点和下底右端点的线”，但代码里上底右端点是 (60,30)，下底右端点应该是 (90,90)。从 (60,30) 到 (90,90) 并不垂直，因为 x 从 60 变到了 90。问题出在我最初定义的梯形参数上。
定义直角在右侧的梯形，必须保证上底右端点与下底右端点的 x 坐标相同。否则右边就不是直角。
修正一下参数：上底右端点的 x 是 60，下底右端点的 x 也必须是 60。这样的话，下底左端点的 x 就要重新算。如果下底长度是 80，那么下底右端点 x=60，下底左端点 x = 60 - 80 = -20，这个值是负数，跑到画布外面去了。
所以我需要用另一组参数。重新设计：上底 60，下底 120，梯形高度 80。右侧直角边位于 x=140。那么：
- 上底左端点：x = 140 - 60 = 80
- 上底右端点：x = 140，y = 20
- 下底右端点：x = 140，y = 100
- 下底左端点：x = 140 - 120 = 20
四个顶点就是：
- 左上：(80, 20)
- 右上：(140, 20)
- 右下：(140, 100)
- 左下：(20, 100)
这样右边从 (140,20) 到 (140,100) 是一条竖直线，直角成立。左边从 (20,100) 回到 (80,20) 是斜边。这才符合标题里“向右”的意思。
我之前那组数据的问题在于，为了让上底 40 下底 80 成立，我把右上和右下的 x 设成了不同的值，这就把“右边垂直”这个关键条件弄丢了。这个坑很典型，坐标一多就容易乱。
修正后的完整代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Canvas 直角梯形（向右）</title> <style> canvas { border: 1px solid #ccc; display: block; margin: 20px auto; } </style> </head> <body> <canvas id="canvas" width="200" height="150"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 梯形参数 var topY = 20; var bottomY = 100; var topWidth = 60; // 上底宽度 var bottomWidth = 120; // 下底宽度 var rightX = 140; // 右侧直角边所在 x 坐标 var topLeftX = rightX - topWidth; var topRightX = rightX; var bottomRightX = rightX; var bottomLeftX = rightX - bottomWidth; ctx.beginPath(); ctx.moveTo(topLeftX, topY); ctx.lineTo(topRightX, topY); ctx.lineTo(bottomRightX, bottomY); ctx.lineTo(bottomLeftX, bottomY); ctx.closePath(); ctx.fillStyle = '#4A90D9'; ctx.fill(); ctx.strokeStyle = '#2C3E50'; ctx.lineWidth = 2; ctx.stroke(); </script> </body> </html>2.2 四个顶点坐标怎么算
现在我来把这组坐标的计算逻辑提炼成公式。假设：
- 梯形的位置由右侧直角边的 x 坐标
rightX、上底 y 坐标topY、下底 y 坐标bottomY决定 - 上底长度为
topWidth，下底长度为bottomWidth
那么四个顶点坐标是：
- 左上：
(rightX - topWidth, topY) - 右上：
(rightX, topY) - 右下：
(rightX, bottomY) - 左下：
(rightX - bottomWidth, bottomY)
这里的关键约束是右上和右下共用同一个 x 坐标rightX，这样右边才垂直。右下和左下共用同一个 y 坐标bottomY，保证下底水平。左上和右上共用topY，保证上底水平。
再强调一遍，梯形的“高”不是上底和下底的差值，而是 topY 和 bottomY 的差值。比如bottomY - topY = 100 - 20 = 80，这个才是梯形的高度。
这套公式是我日常用的方式，好处是只需要维护 4 个参数就能控制梯形的全部形状和位置，不需要记 8 个坐标值。如果项目里梯形是要跟着鼠标移动的，也只需要改rightX和两个 y 坐标。
2.3 填充与描边的区别
路径闭合之后，接下来就是“上色”。这里有两个方法：fill()和stroke()。
fill()把闭合区域内部填满颜色，用的是fillStyle设定的值。stroke()只画轮廓线，用的是strokeStyle设定的值，线条粗细由lineWidth控制。
实际项目里这两个经常搭配使用。比如数据展示类的梯形块，一般先fill()填充一个浅色底，再用stroke()描一圈深色边，视觉上会有层次感。但如果你的设计稿里只需要色块，不描边，那就只调fill()。
有一个细节值得注意：stroke()的线条是沿着路径中心线绘制的，半条线在路径内侧，半条线在外侧。如果梯形紧贴画布边缘，描边会被裁掉一半，看起来一边粗一边细。解决办法是让图形离画布边缘至少lineWidth / 2的距离，或者把画布四边留出 padding。
另外一个新手容易忽略的点：fill()会自动闭合路径，即使你没有调用closePath()，它也会把最后一个点和起始点连起来。但stroke()不会，如果路径没闭合，描边会缺一条边。这也解释了为什么示例代码里我先调closePath()再调fill()和stroke()——调了closePath()之后，无论填充还是描边，路径都是完整闭合的状态，行为最可预期。
3. 避坑指南：这些坑我替你先踩了
3.1 高 DPI 屏模糊：Canvas 画出来发虚的元凶
先说说最坑的一个问题。同一段代码，在普通屏幕上看着正常，拿到 Retina 屏或高分屏上就模糊得一塌糊涂。原因我之前提过：Canvas 的实际像素尺寸和 CSS 显示尺寸不一致，浏览器会把一张低分辨率位图拉伸到高分辨率屏幕上。
解决办法是对 Canvas 做像素比适配。核心逻辑是读取设备的devicePixelRatio，然后按比例放大画布的实际像素尺寸，再用 CSS 把画布显示尺寸固定为原始大小。
function setupCanvas(canvas, width, height) { var dpr = window.devicePixelRatio || 1; canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; var ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); return ctx; }用的时候把原来的getContext换成这个函数：
var canvas = document.getElementById('canvas'); var ctx = setupCanvas(canvas, 200, 150); // 后续绘制依然按 200x150 的逻辑坐标来写 // 比如画上底 y=20，就还是 ctx.moveTo(80, 20)你可能会想，为什么要多此一举地把画布像素尺寸设大再用 CSS 缩小？说白了就是让 Canvas 拥有足够多的物理像素去渲染图形。ctx.scale(dpr, dpr)把绘图上下文缩放之后，后面所有坐标仍按逻辑尺寸写，不改变你已经设计好的坐标体系。
做过移动端适配的都知道，这是 Canvas 高清绘制的标准做法，但在新手教程里很少看到完整说明，所以列在这里。
3.2 画布尺寸变化：梯形被“拉伸”的经典翻车现场
另一个很常见的问题：页面布局变了，Canvas 的 CSS 尺寸跟着响应式布局调整，结果梯形被横向或纵向拉伸，变形了。
原因是 Canvas 的元素尺寸和绘图缓冲区尺寸是两回事。你用 CSS 把 canvas 元素的显示宽度改成 400，但 canvas.width 属性还是 200，浏览器就会把 200 宽的绘图结果拉伸到 400 显示。比例不对，图形自然变形。
解决思路分两步。第一步是不要用 CSS 去改 Canvas 尺寸，而是通过设置canvas.width和canvas.height来改。第二步是改完以后必须重绘一次，因为设置 width 或 height 会清空画布内容。
响应式场景下推荐做法是监听容器尺寸变化，统一走一遍“更新画布尺寸 -> 重绘图形”的流程：
function drawTrapezoid(ctx, params) { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 按 2.2 的公式计算顶点并绘制 } function resizeCanvas(canvas, containerWidth, containerHeight) { canvas.width = containerWidth; canvas.height = containerHeight; var ctx = canvas.getContext('2d'); drawTrapezoid(ctx, getParams(containerWidth, containerHeight)); } window.addEventListener('resize', function() { resizeCanvas(canvas, container.clientWidth, container.clientHeight); });这样做还有一个好处：所有绘图状态会随着尺寸更新自动重置，不容易残留上次绘制的样式。
3.3 坐标精度与浮点误差：图形边缘出现毛刺
前端开发里0.1 + 0.2 !== 0.3这种浮点问题大家都懂，但放到 Canvas 绘图里，很多人就放松警惕了。坐标算出来如果是 33.333333 这种小数，Canvas 会按像素取整去渲染，不同浏览器处理方式有差异，表现就是梯形边缘出现毛刺或者锯齿。
解决方式不复杂：要么在计算坐标后做取整，要么在绘制前把坐标统一量化。
function roundPoint(x, y) { return { x: Math.round(x), y: Math.round(y) }; }需要注意的是，Math.round在小数点后是 .5 时会向上取整，如果多个顶点都处于这种边界情况，整体图形可能会产生 1 像素的偏移。想要更稳定，可以用Math.floor(x + 0.5)自己控制。实际项目中大部分场景直接Math.round就够用。
还有一种更隐蔽的情况：梯形位置在设计稿里是一个很奇怪的数字，比如 rightX = 99.5。这种时候先别纠结取整规则，回头检查一下设计稿的标注是不是有误，或者是不是用了某种奇怪的基准。很多时候是设计稿本身没有对齐到像素网格，取整后图形其实会更干净。
3.4 save/restore 状态污染：代码量大了之后最隐蔽的坑
初学者一般不太会遇到这个问题，但项目里 Canvas 绘制逻辑一复杂，状态污染的 bug 能让人调试到怀疑人生。
ctx.fillStyle、strokeStyle、lineWidth这些属性是全局的，你在一个函数里改了填充色，没有恢复，下一个绘制函数就会继承这个颜色，画出来的东西完全不是预期效果。
标准解法是ctx.save()和ctx.restore()。save()会把当前的所有状态压入一个栈，restore()弹栈恢复。两个方法必须成对出现，否则状态照样乱。
function drawRightTrapezoid(ctx, params) { ctx.save(); ctx.fillStyle = params.fillColor; ctx.strokeStyle = params.strokeColor; ctx.lineWidth = params.lineWidth; ctx.beginPath(); // 顶点计算与连线 ctx.fill(); ctx.stroke(); ctx.restore(); }有个常见误区：save()和restore()只管绘图状态，不管路径。所以不能指望用restore()清除路径，每条路径绘制完该调beginPath()还是要调。
3.5 常见问题速查表
| 现象 | 可能原因 | 解决方法 |
|---|---|---|
| 图形发虚、边缘模糊 | devicePixelRatio 大于 1，未做高清适配 | 按 3.1 的方式放大画布像素尺寸并 scale |
| 梯形被拉伸变形 | 用 CSS 修改了元素尺寸，canvas.width 未同步 | 改为设置 width/height，并重新绘制 |
| 图形上下颠倒 | 把 Canvas 坐标系当成了数学坐标系 | 确认 y 增大方向是向下 |
| 右侧没有直角 | 右上和右下的 x 坐标不一致 | 统一 rightX |
| 描边缺一条边 | 没有 closePath，stroke 不自动闭合 | 先调 closePath 再 stroke |
| 后续绘制颜色不对 | fillStyle 等状态被之前代码修改且未恢复 | 使用 save/restore 包裹 |
| 锯齿严重 | 坐标带小数产生取整不一致 | 对坐标做 round 处理 |
| 动画重影、残影 | 没有 clearRect，或尺寸变化后未清空 | 每次重绘前 clearRect 全画布 |
4. 从静态到动态：让梯形“活”起来
4.1 参数公式化：一句话画任意位置、任意大小的向右直角梯形
静态图形只是第一步，真实项目里更常见的是需要根据数据动态改变梯形的大小和位置。比如图表组件里，梯形块的高度要对应某个数值。
这时候最好把绘制逻辑封装成一个函数，接收参数并输出结果。基于 2.2 的公式，我写一个通用函数：
function drawRightTrapezoid(ctx, options) { var rightX = options.rightX; var topY = options.topY; var bottomY = options.bottomY; var topWidth = options.topWidth; var bottomWidth = options.bottomWidth; var fillColor = options.fillColor || '#4A90D9'; var strokeColor = options.strokeColor || '#2C3E50'; var lineWidth = options.lineWidth || 2; ctx.save(); ctx.beginPath(); ctx.moveTo(rightX - topWidth, topY); ctx.lineTo(rightX, topY); ctx.lineTo(rightX, bottomY); ctx.lineTo(rightX - bottomWidth, bottomY); ctx.closePath(); ctx.fillStyle = fillColor; ctx.fill(); if (lineWidth > 0) { ctx.strokeStyle = strokeColor; ctx.lineWidth = lineWidth; ctx.stroke(); } ctx.restore(); }调用方式：
drawRightTrapezoid(ctx, { rightX: 140, topY: 20, bottomY: 100, topWidth: 60, bottomWidth: 120, fillColor: '#FF6B6B', strokeColor: '#C0392B', lineWidth: 2 });如果你想画一个左边直角的梯形，原理完全一样，只要把垂直边放在左侧，然后保证左上和左下的 x 坐标相同即可。这套思路稍微改一改就能举一反三，不限于直角梯形，任意四边形都能用顶点坐标的办法搞定。
4.2 简单动画与交互：让梯形跟随鼠标移动
动画的本质是“不断清除画面、更新位置、重绘”。用requestAnimationFrame驱动，每次重绘时把梯形的位置参数往目标位置移动。
下面这段代码让梯形跟随鼠标在画布内移动：
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var targetX = 140; var targetY = 100; canvas.addEventListener('mousemove', function(event) { var rect = canvas.getBoundingClientRect(); targetX = event.clientX - rect.left; targetY = event.clientY - rect.top; }); function animate() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 梯形参数随鼠标位置变化 drawRightTrapezoid(ctx, { rightX: targetX, topY: targetY - 40, bottomY: targetY + 20, topWidth: 40, bottomWidth: 80, fillColor: '#2ECC71' }); requestAnimationFrame(animate); } animate();这里每帧重绘的清屏操作很容易被漏掉。没有clearRect的话，旧图形会一直残留在画布上，形成拖影效果，看起来像运动模糊。如果你确实想要拖影效果，可以故意不清理整块画布，而是用一个半透明色覆盖，但默认场景下务必清干净。
另一个性能层面的细节：如果每帧的数据量很大，不要用ctx.clearRect清全屏再用预备操作，而是先判断梯形当前是否在可视区域内，不在就直接跳过绘制，减少不必要的fill和stroke开销。
5. Vue 3 组件化封装实战
5.1 组件结构与关键代码
项目里画一个梯形通常不是孤立的，它会出现在某个 Vue 或 React 页面里。与其在页面里散落到处是 Canvas 代码，不如封装成独立组件。我用 Vue 3 + Composition API 写一个RightTrapezoid.vue示例：
<template> <canvas ref="canvasRef" :style="{ width: width + 'px', height: height + 'px' }"></canvas> </template> <script setup> import { ref, onMounted, watch } from 'vue'; const props = defineProps({ width: { type: Number, default: 200 }, height: { type: Number, default: 150 }, topWidth: { type: Number, default: 60 }, bottomWidth: { type: Number, default: 120 }, fillColor: { type: String, default: '#4A90D9' }, strokeColor: { type: String, default: '#2C3E50' }, lineWidth: { type: Number, default: 2 } }); const canvasRef = ref(null); function setupCanvas(canvas, width, height) { var dpr = window.devicePixelRatio || 1; canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; var ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); return ctx; } function drawTrapezoid(ctx) { var rightX = props.width - 20; var topY = 20; var bottomY = props.height - 20; var topWidth = props.topWidth; var bottomWidth = props.bottomWidth; ctx.clearRect(0, 0, props.width, props.height); ctx.save(); ctx.beginPath(); ctx.moveTo(rightX - topWidth, topY); ctx.lineTo(rightX, topY); ctx.lineTo(rightX, bottomY); ctx.lineTo(rightX - bottomWidth, bottomY); ctx.closePath(); ctx.fillStyle = props.fillColor; ctx.fill(); if (props.lineWidth > 0) { ctx.strokeStyle = props.strokeColor; ctx.lineWidth = props.lineWidth; ctx.stroke(); } ctx.restore(); } function redraw() { if (!canvasRef.value) return; var ctx = setupCanvas(canvasRef.value, props.width, props.height); drawTrapezoid(ctx); } onMounted(redraw); watch(() => props, redraw, { deep: true }); </script>组件化的意义在于：页面里要画十个不同样式的梯形，不用复制十份绘制代码，只需要传入不同的 props 就行。修改颜色、调整上下底宽度，组件内部自动重绘。这比在页面里手写一堆命令式 Canvas 代码要干净得多。
5.2 面试题里的 Canvas 手写题：怎么答才稳
热词里反复出现“前端面试题”，正好可以聊聊这个方向。Canvas 手写绘图题在前端面试里不算高频，但一旦碰到，考察的不是你会不会调用 API，而是你理不理解坐标计算和路径绘制的完整流程。
面试官如果让你“画一个直角梯形”，你可以按下面这个顺序回答：
- 先定义梯形关键参数：上底宽度、下底宽度、高度、右侧边的位置。
- 计算出四个顶点坐标，画的时候保证右边两个顶点 x 相同。
- 使用
beginPath+moveTo+lineTo+closePath构建路径。 - 再区分
fill和stroke的作用。 - 最后提一下高清屏适配和响应式重绘，这能体现你踩过坑、有实战经历。
就算写不出完美代码，把坐标计算逻辑和绘制步骤讲清楚，已经能拿到大部分分数。如果能顺口说出“devicePixelRatio 会导致模糊，需要放大画布再 scale”，面试官会认为你有实际项目经验，不是只会背 API。
这个标题里“小白前端”四个字其实是很诚实的定位。Canvas 图形绘制不是难点，难的是许多教程讲得太抽象，看完还是一头雾水。我希望这篇文章能成为一份可以直接对照着抄的作业，尤其那几个坑，能让你少走两三天弯路。我最早自己手写 Canvas 的时候，在 DPI 模糊这个问题上卡了整整一个下午，后来搞清楚了原理，其实只要几行代码就能解决。现在你看到这里，已经比当年的我快多了。