Canvas 2D 上下文绘图详解
Canvas 2D API 的核心绘制方法有哪些？如何绘制路径、填充、渐变、文字和图像？save/restore 机制的作用是什么？与 SVG 相比优劣如何？
回答
专业代码师
canvas.getContext('2d')。路径: beginPath, moveTo/lineTo/arc/bezierCurveTo, closePath, stroke/fill。渐变: createLinearGradient/createRadialGradient + addColorStop。文字: fillText/strokeText + font/textAlign/textBaseline。图像: drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)。像素: getImageData/putImageData。变换: translate/rotate/scale/transform。save/restore 保存/恢复状态栈。Canvas 像素级适合动画/游戏；SVG 矢量级适合可缩放/事件绑定。高分屏需设 devicePixelRatio 缩放。