Canvas绘制哆啦A梦本质是路径+颜色+图层控制，需用arc()、bezierCurveTo()等拆解轮廓分层绘制，避免路径连接错误与颜色溢出，并通过显式download属性导出透明PNG。
canvas 绘制哆啦A梦本质是路径+颜色+图层控制
不能直接“画哆啦A梦”，canvas 没有内置角色库，所有图形都得拆解成 arc()、quadraticCurveTo()、fillRect() 这类基础操作。你真正要做的，是用几何方式逼近轮廓：圆脸用 arc()，耳朵用两个小圆，铃铛是带描边的圆，胡须是几条 lineTo() 线段。
常见错误是试图一笔画完——结果线条错位、比例失调、颜色溢出。正确做法是分层绘制：先画脸底色，再叠耳朵，再画五官，最后加高光。每一层都用 beginPath() 开头，避免路径意外连接。
用 arc() 和 bezierCurveTo() 控制脸部曲线
哆啦A梦的脸不是正圆，下颌略方、额头略平，纯 arc() 会太僵硬。实际中常用 bezierCurveTo() 调整下巴弧度，或组合多个 arc() 拼接。
- 脸主体：用
arc(200, 200, 120, 0, Math.PI * 2)打底，但立刻用lineTo()截断下部再补直角，模拟微方下颌 - 耳朵：两个小圆，中心点分别在
(140, 120)和(260, 120)，半径24，填充#999 - 铃铛：大圆居中
arc(200, 250, 32, 0, Math.PI * 2)，再用strokeStyle = '#ffcc00'+stroke()加金边
颜色和层级不按顺序就容易糊成一团
fill() 和 stroke() 的执行顺序决定视觉层叠关系。比如眼睛白色底必须先填，黑色瞳孔后画；如果反了，瞳孔会被白色盖住。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 没调
ctx.fillStyle就直接fill()→ 用默认黑填充，眼睛变实心 - 画完铃铛忘了
beginPath()，接着画胡须 → 胡须连到铃铛边缘，出现奇怪连线 - 用
rgba(255,255,255,0.3)绘制高光时，叠加次数太多导致脸发灰 → 高光只画一次，位置固定在左上
导出为图片时透明背景被浏览器默认白底吃掉
保存成 PNG 后打开发现背景是白的，不是想要的透明——这不是代码问题，是浏览器下载行为。Canvas 默认是透明画布，但 toDataURL('image/png') 输出的 base64 是正确的（含 alpha），问题出在你用 location.href = dataUrl 触发下载时，某些浏览器会强制套白底。
稳妥做法：
- 用
const link = document.createElement('a')创建下载链接 -
link.download = 'duola.png'显式声明文件名 -
link.href = canvas.toDataURL('image/png')，然后link.click() - 别用
open()或直接跳转，那会经过页面渲染层，可能丢 alpha
真要验证是否透明，把生成的 base64 粘到在线 PNG 查看器里，或者拖进 Photoshop —— 浏览器地址栏预览不可信。
