canvas createpattern 实现纹理填充需确保图案源就绪、尺寸合理、跨域合规；图片须在 onload 后调用，repetition 仅支持 repeat/repeat-x/repeat-y/no-repeat；高dpi需匹配图源或禁用平滑；源可为 img/canvas/video，但须满足对应约束。
Canvas 的 createPattern 是实现重复纹理填充的核心方法，关键不在“怎么写”，而在“怎么准备”——图案源必须就绪、尺寸合理、跨域合规，否则图案会静默失效或报错。
确保图片已加载完成再创建图案
最常见错误是拿到 <img> 就立刻传给 createPattern，此时图片还没解码，方法返回 null，后续 fill() 也不报错，只留一片空白。
- 必须监听
img.onload，在回调中调用createPattern - 不要用
img.src = 'xxx'后紧跟createPattern—— 即使图在缓存里，加载仍是异步过程 - 若需更可控的加载方式，可用
fetch + createImageBitmap（注意 Safari 15.4+ 才支持）
正确设置重复方式与行为边界
repetition 参数只有四个合法值，且语义明确，没有“居中”“拉伸”等隐藏功能：
-
"repeat"：默认，横向纵向无限平铺 -
"repeat-x"：仅水平重复，垂直方向只显示一次（顶部对齐） -
"repeat-y"：仅垂直重复，水平方向只显示一次（左侧对齐） -
"no-repeat"：仅绘制一次，左上角（0,0）对齐，不缩放、不居中
想实现“水平平铺 + 垂直居中”，不能靠 repetition，得手动计算 fillRect 的 y 坐标或用 transform 移动图案原点。
处理高DPI和模糊问题
小图在 Retina 屏上放大平铺，容易发虚。这不是代码错，而是像素失配：
- 优先使用匹配设备像素比的图源，例如
@2x图（如 64×64 用于 2× 屏） - 避免用 CSS 缩放
<canvas></canvas>元素——这会整体模糊渲染缓冲区 - 设
ctx.imageSmoothingEnabled = false可获得硬边效果，适合像素风纹理
跨域与图案源类型注意事项
图案源不限于 <img>，还可为 <canvas></canvas> 或 <video></video>，但各有约束：
- 跨域图片必须设置
crossOrigin="anonymous"，否则抛SecurityError -
<canvas></canvas>作源时，需先在其上绘制内容，且尺寸不能为 0×0 -
<video></video>作源时，需触发loadeddata事件，且只取当前帧——不是动态视频流 - 不能直接传 URL 字符串或 base64，必须是已加载的
Image对象
