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'; const pat = ctx.createPattern(img, 'repeat');—— 即使图在缓存里，加载仍是异步过程 - 更可控的替代方案：用
fetch加载后转为createImageBitmap（Safari 15.4+ 支持）
理解 repetition 参数的真实行为
repetition 只有四个合法值，且语义严格，没有“居中”“拉伸”“适配”等隐藏功能：
-
"repeat"：默认，横向纵向无限平铺 -
"repeat-x"：仅水平重复，垂直方向只显示一次（顶部对齐） -
"repeat-y"：仅垂直重复，水平方向只显示一次（左侧对齐） -
"no-repeat"：仅绘制一次，左上角 (0,0) 对齐，不缩放、不居中
想实现“水平平铺 + 垂直居中”，需手动计算 fillRect 的 y 坐标，或用 ctx.translate(0, offsetY) 移动图案原点。
处理高 DPI 屏幕下的模糊问题
小图在 Retina 屏上放大平铺会发虚，本质是像素失配，而非代码错误：
- 优先使用匹配设备像素比的图源，例如 64×64 的图用于 1× 屏，128×128 用于 2× 屏
- 避免用 CSS 缩放
<canvas>元素——这会使整个渲染缓冲区模糊 - 设
ctx.imageSmoothingEnabled = false可获得锐利硬边效果，适合像素风纹理
跨域与图案源类型限制
图案源不限于 <img>，还可为 <canvas> 或 <video>，但各有硬性约束：
- 跨域图片必须设置
crossOrigin="anonymous"，否则抛SecurityError -
<canvas>作源时，需先在其上绘制内容，且宽高不能为 0×0 -
<video>作源时，需触发loadeddata事件，且仅取当前帧（非动态流） - 不能直接传 URL 字符串或 base64，必须是已加载完成的
Image对象
