Canvas 2D 进阶
内容提要
本文介绍了Canvas 2D渲染引擎的基本概念，包括状态管理、变形、合成操作、裁剪和像素控制。通过状态栈管理绘图状态，支持平移、旋转和缩放等变形操作。合成操作定义新图形与已有图形的叠加方式，裁剪功能限制绘制区域。最后，介绍了获取和设置像素数据的方法，以及动画的基本实现。
延伸解读
状态栈与变形：理解 Canvas 的绘图上下文
Canvas 的绘图状态（如样式、变形、裁剪路径）通过状态栈管理。save() 和 restore() 成对使用，可以隔离不同绘制阶段的设置，避免相互干扰。变形操作（平移、旋转、缩放）本质是坐标系变换，只影响后续绘制，且可叠加。理解这一点，就能灵活控制图形的位置和形态，而不会意外改变已绘制的元素。
合成与裁剪：控制图形叠加与显示区域
globalCompositeOperation 决定了新图形如何与画布上已有内容混合，从默认的 source-over 到各种混合模式，能实现丰富的视觉效果。裁剪 clip() 则限制后续绘制的可见区域，常用于制作遮罩或局部绘制。两者都只影响后续操作，且裁剪前建议 save() 保存状态，以便恢复。
像素操作与动画：从数据到动态效果
getImageData() 和 putImageData() 允许直接读写画布像素，可用于滤镜、透明度调整等图像处理。动画的核心是 requestAnimationFrame()，它按屏幕刷新率回调，配合擦除重绘和几何变换实现流畅动画。文章中的小球案例展示了速度、边界反弹、加速度和拖尾效果，是理解动画循环的典型示例。
优化实践：解决 1px 模糊与高清屏适配
Canvas 绘制 1px 线条时可能因栅格化而模糊，偏移 0.5px 或使用整数倍缩放可缓解。更通用的方案是根据 window.devicePixelRatio 调整画布的实际像素尺寸，再用 scale 缩放坐标系，这样既能解决 1px 问题，也能在高清屏上保持清晰。注意画布尺寸与 CSS 尺寸的区别，避免放大导致的模糊。
Q&A
Canvas 2D 渲染引擎的状态管理是如何实现的？
Canvas 2D 渲染引擎通过状态栈管理绘图状态，使用 save() 方法保存当前状态，restore() 方法恢复之前的状态。
Canvas 2D 中的变形操作有哪些？
变形操作包括平移、旋转和缩放，影响后续绘制而不影响之前的绘制。
如何在 Canvas 2D 中实现合成操作？
合成操作通过设置 globalCompositeOperation 属性来定义新图形与已有图形的叠加方式，支持多种合成模式。
Canvas 2D 中的裁剪功能是如何工作的？
裁剪功能使用 clip() 方法设置剪切路径，限制后续绘制区域，裁剪只对后续绘制生效。
如何获取和设置 Canvas 2D 的像素数据？
可以使用 getImageData() 方法获取指定矩形的像素数据，使用 putImageData() 方法将像素数据绘制到画布上。
Canvas 2D 动画是如何实现的？
动画通过 requestAnimationFrame() 实现，涉及绘制、移动和边界反弹等基本概念。
