Canvas绘制模式详解，掌握填充规则、绘制顺序和图层管理技巧。Canvas绘制模式涉及填充规则、绘制顺序和图层管理等概念，是实现复杂图形效果的基础。
Canvas支持两种填充规则，用于判断点是否在路径内部：
默认规则，根据路径方向判断：
ctx.fill('nonzero')
ctx.clip('nonzero')
原理：从点向任意方向发射射线，计算与路径的交点。顺时针方向+1，逆时针方向-1，结果非零则在内部。
奇偶规则，用于创建镂空效果：
ctx.fill('evenodd')
ctx.clip('evenodd')
原理：从点向任意方向发射射线，计算与路径的交点数量。奇数在内部，偶数在外部。
Canvas按照代码执行顺序绘制，后绘制的内容会覆盖先绘制的内容：
ctx.fillStyle = 'blue'
ctx.fillRect(50, 50, 100, 100) // 先绘制蓝色
ctx.fillStyle = 'red'
ctx.fillRect(100, 100, 100, 100) // 后绘制红色，覆盖蓝色
通过控制绘制顺序实现图层效果：
// 最底层：背景
ctx.fillStyle = '#f0f0f0'
ctx.fillRect(0, 0, canvas.width, canvas.height)
// 中间层：内容
ctx.drawImage(image, 0, 0)
// 顶层：遮罩或效果
ctx.globalAlpha = 0.5
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, canvas.width, canvas.height)
结合合成模式和透明度实现复杂效果：
使用离屏Canvas实现复杂图层：
const offscreen = document.createElement('canvas')
offscreen.width = 400
offscreen.height = 300
const offCtx = offscreen.getContext('2d')
// 在离屏Canvas上绑制复杂内容
offCtx.fillStyle = 'red'
offCtx.fillRect(0, 0, 200, 200)
// 将离屏Canvas绘制到主Canvas
ctx.drawImage(offscreen, 0, 0)
填充规则选择
根据需要选择合适的填充规则，evenodd适合镂空效果。
绘制顺序
注意绘制顺序，后绘制的内容会覆盖先绘制的内容。
性能优化
复杂图层考虑使用离屏Canvas缓存。
状态管理
使用save/restore管理绑制状态。