猪头的简笔画源码解析：3招搞定API变动
昨天还在用 ctx.drawImage 画猪头，今天一升级 Canvas 库，报错说 imageSmoothingEnabled 不存在？别慌，我信你个鬼。
版本升级后 API 全变了，这才是前端图形开发的常态。别被那些花里胡哨的教程忽悠，咱们直接看源码解析，把底层逻辑扒干净。
概念速懂：猪头简笔画到底在画什么
很多兄弟以为画猪头就是套几个圆。错。真正的猪头的简笔画，核心在于贝塞尔曲线与二次曲线的配合。
你看那些老旧的教程，还在用 arc 画耳朵，线条生硬得像用尺子量出来的。为什么？因为他们不懂路径（Path）的概念。在 Canvas 2D 标准中，图形不是“画”上去的，而是通过一系列指令构建出来的。
猪头的简笔画本质上是一个封闭路径集合。
- 头部轮廓：一个稍微拉长的椭圆，但上下不对称。
- 耳朵：两个独立的三角形，带有弧度。
- 鼻子：一个矩形加两个鼻孔圆点。
- 眼睛：两个小黑点，位置决定神态。
这里有个关键点：坐标系原点。
很多新手在升级库后，发现图形位置全飘了。为什么？因为新版本的 Canvas API 对 setTransform 的处理逻辑变了。MDN Web Docs 明确指出，canvas 元素的像素尺寸与 CSS 显示尺寸分离后，如果不手动重置变换矩阵，图形就会因为 DPR（设备像素比）问题而模糊或偏移。
咱们不整虚的，直接看源码解析。你要理解的是：浏览器是如何将这些 JS 指令转化为 GPU 指令的。
环境准备：别让你的环境坑了你
在写代码之前，先把环境搭好。别跟我说你直接 <canvas> 往 HTML 里一扔就能跑。
第一步：HTML 结构
<div class="pig-container"><canvas id="pigCanvas" width="800" height="600"></canvas><div class="controls"><button id="btnRedraw">重绘猪头</button><button id="btnReset">重置变换</button></div>
</div>
注意 width 和 height 属性。这是像素尺寸，不是 CSS 尺寸。如果你只设了 CSS，Canvas 内部缓冲区还是默认的 300x150，画出来的猪头会像被压扁的汉堡。
第二步：JS 初始化
const canvas = document.getElementById('pigCanvas');
const ctx = canvas.getContext('2d');// 核心：处理高清屏模糊问题
function setupHiDPI() {const dpr = window.devicePixelRatio || 1;const rect = canvas.getBoundingClientRect();// 1. 设置缓冲区尺寸canvas.width = rect.width * dpr;canvas.height = rect.height * dpr;// 2. 缩放上下文ctx.scale(dpr, dpr);// 3. 设置 CSS 尺寸，保持视觉大小不变canvas.style.width = `${rect.width}px`;canvas.style.height = `${rect.height}px`;
}setupHiDPI();
避坑指南：
很多兄弟升级库后，ctx.scale 失效了。为什么？因为某些封装库在内部已经做过缩放，你手动再调一次，图形就飞出去了。源码解析显示，现代 Canvas 封装库通常会在 context 对象上添加 _transformStack 属性，用于管理变换栈。如果你直接操作原生 ctx，务必确保每次重绘前调用 ctx.setTransform(1, 0, 0, 1, 0, 0) 重置状态。
核心语法：贝塞尔曲线实战
现在进入正题。怎么画一个有灵魂的猪头的简笔画？
传统写法：
// 老式写法，线条生硬
ctx.beginPath();
ctx.arc(400, 300, 100, 0, Math.PI * 2); // 画个圆当头
ctx.fill();
新式写法（推荐）：
使用 bezierCurveTo 和 quadraticCurveTo。
头部轮廓源码解析：
function drawPigHead(ctx, x, y, scale) {ctx.save(); // 保存当前状态，防止污染全局ctx.translate(x, y); // 移动到中心点ctx.scale(scale, scale); // 缩放ctx.beginPath();ctx.moveTo(0, -50); // 从头顶开始// 右侧头部：使用三次贝塞尔曲线，模拟头部的圆润感ctx.bezierCurveTo(80, -50, // 控制点1100, 0, // 控制点280, 50 // 终点);// 下巴：稍微平一点ctx.quadraticCurveTo(50, 60, // 控制点0, 60 // 终点);// 左侧头部：对称ctx.quadraticCurveTo(-50, 60, // 控制点-80, 50 // 终点);ctx.bezierCurveTo(-100, 0, // 控制点1-80, -50, // 控制点20, -50 // 回到起点);ctx.closePath();// 填充颜色ctx.fillStyle = '#FFDAB9'; // 猪皮色ctx.fill();ctx.strokeStyle = '#000';ctx.lineWidth = 2;ctx.stroke();ctx.restore(); // 恢复状态
}
耳朵的精髓：
耳朵不能是直角三角形。用 quadraticCurveTo 画一个带弧度的三角形。
function drawEar(ctx, direction) {// direction: 1 表示右耳, -1 表示左耳const startX = 50 * direction;const startY = -40;ctx.beginPath();ctx.moveTo(startX, startY);// 外轮廓：向上凸起ctx.quadraticCurveTo(70 * direction, -80, // 控制点，决定耳朵的“胖瘦”90 * direction, -60 // 终点);// 内轮廓：回到头部ctx.quadraticCurveTo(70 * direction, -30, // 控制点startX, startY // 起点);ctx.closePath();ctx.fillStyle = '#FFB6C1'; // 粉色ctx.fill();ctx.stroke();
}
鼻子： 鼻子是猪头的简笔画的灵魂。用一个圆角矩形加两个鼻孔。
function drawNose(ctx) {// 鼻子主体ctx.beginPath();// 圆角矩形近似ctx.roundRect(-20, 20, 40, 25, 5); ctx.fillStyle = '#FF9999';ctx.fill();ctx.stroke();// 鼻孔ctx.beginPath();ctx.arc(-8, 32, 3, 0, Math.PI * 2);ctx.arc(8, 32, 3, 0, Math.PI * 2);ctx.fillStyle = '#000';ctx.fill();
}
完整代码示例：一键生成
把上面的片段组合起来，这就是一个完整的、可运行的猪头的简笔画生成器。
// 主绘制函数
function renderPig() {// 清空画布，注意：如果用了 transform，fillRect 可能清不干净// 推荐：先重置变换，再清空ctx.setTransform(1, 0, 0, 1, 0, 0);ctx.clearRect(0, 0, canvas.width, canvas.height);// 恢复 HiDPI 缩放const dpr = window.devicePixelRatio || 1;ctx.scale(dpr, dpr);// 1. 画头部drawPigHead(ctx, 400, 300, 1.5);// 2. 画耳朵（注意顺序，耳朵要在头部后面，但视觉上在头部上方，这里简化为直接画在头部坐标上）// 实际项目中，应该计算头部轮廓上的具体点来定位耳朵ctx.save();ctx.translate(400, 300);ctx.scale(1.5, 1.5);drawEar(ctx, 1); // 右耳drawEar(ctx, -1); // 左耳ctx.restore();// 3. 画鼻子ctx.save();ctx.translate(400, 300);ctx.scale(1.5, 1.5);drawNose(ctx);ctx.restore();// 4. 画眼睛ctx.save();ctx.translate(400, 300);ctx.scale(1.5, 1.5);ctx.beginPath();ctx.arc(-25, -10, 5, 0, Math.PI * 2);ctx.arc(25, -10, 5, 0, Math.PI * 2);ctx.fillStyle = '#000';ctx.fill();ctx.restore();
}// 绑定按钮事件
document.getElementById('btnRedraw').addEventListener('click', renderPig);
document.getElementById('btnReset').addEventListener('click', () => {ctx.setTransform(1, 0, 0, 1, 0, 0);renderPig();
});// 初始渲染
renderPig();
代码解析：
ctx.save()和ctx.restore()是救命符。每次画完一个部件，务必恢复状态，否则线宽、颜色、变换会累加，导致下一个部件画歪。roundRect是较新的 API，如果在不支持的浏览器上，可以用arcTo或手动画多边形模拟。MDN Web Docs 提供了兼容性列表，建议生产环境加一层 polyfill。- 变换矩阵的累积：
translate和scale是矩阵乘法。先 translate 再 scale，和先 scale 再 translate，结果完全不同。记住：先移动，后缩放。
常见报错：版本升级后的血泪教训
报错1：TypeError: ctx.roundRect is not a function
原因：你用的浏览器或 Node.js 环境太老，不支持 roundRect。
解决方案：
// Polyfill
if (!CanvasRenderingContext2D.prototype.roundRect) {CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {if (w < 2 * r) r = w / 2;if (h < 2 * r) r = h / 2;this.beginPath();this.moveTo(x + r, y);this.arcTo(x + w, y, x + w, y + h, r);this.arcTo(x + w, y + h, x, y + h, r);this.arcTo(x, y + h, x, y, r);this.arcTo(x, y, x + w, y, r);this.closePath();return this;};
}
报错2：图形位置偏移，特别是缩放后
原因：没有正确重置变换矩阵。
解决方案：
在每次 render 开始前，强制调用 ctx.setTransform(1, 0, 0, 1, 0, 0)。这是最稳妥的办法，不管之前有多少次变换，一次性归零。
报错3：高分屏模糊
原因：Canvas 内部像素尺寸与 CSS 尺寸不匹配。
解决方案：
参考【环境准备】部分的 setupHiDPI 函数。核心是 canvas.width = rect.width * dpr 和 ctx.scale(dpr, dpr)。
报错4：动画卡顿
原因：在 requestAnimationFrame 中执行了太多同步计算。
解决方案：
将路径计算与渲染分离。预先计算好所有贝塞尔曲线的控制点，存入数组。渲染时只负责 stroke 和 fill。
小结：从猪头到数据可视化
你看，猪头的简笔画看似简单，实则涵盖了 Canvas 2D 的核心：路径构建、变换矩阵、状态管理、高清适配。
这些技能，直接可以迁移到数据可视化中。
- 折线图：本质就是一系列
lineTo或quadraticCurveTo。 - 饼图：本质就是
arc的扇形填充。 - 热力图：本质就是大量
fillRect的颜色映射。
当你理解了源码解析背后的变换逻辑，你就不会再被各种图形库的 API 变动吓到。因为万变不离其宗，浏览器最终都是把这些指令扔给 GPU 渲染。
证书变更与注销流程（类比技术债清理）： 就像老版本 API 需要注销一样，你代码里的冗余变换矩阵也需要定期“注销”。每次重绘前重置，就是清理“技术债”。
证书补办流程（类比环境恢复）：
如果环境被污染了（比如 CSS 样式覆盖了 Canvas 尺寸），你需要“补办”环境。重新计算 getBoundingClientRect，重新设置 width/height，重新 scale。
别死记硬背 API。去读 MDN Web Docs，去读浏览器源码（Chrome 的 Blink 引擎是公开的），去调试。当你能在 DevTools 里看到 canvas 的 backing store 尺寸变化时，你就真正入门了。
你更常用哪种写法？是纯 Canvas 手写，还是借助 Fabric.js / Konva.js 这类封装库？评论区交流，咱们聊聊各自踩过的坑。
