Canvas图案填充核心是用createPattern基于图像源（img/canvas/video）创建CanvasPattern对象并赋给fillStyle；需确保图片加载完成或离屏canvas预绘制纹理，注意跨域与缩放适配。
Canvas 中用图案模式（createPattern）填充复杂纹理背景，核心是先准备图像源（图片、<canvas> 或 <video>），再创建重复平铺的 CanvasPattern 对象，最后赋给绘图上下文的 fillStyle 并调用绘制命令。
准备可复用的纹理图像源
图案必须基于一个图像源，不能直接用纯色或渐变代替。常见做法：
- 使用已加载完成的
<img>元素，确保其complete === true，否则createPattern会返回null - 也可用另一个
<canvas>绘制自定义小纹理（比如噪点、斜线、波点），再作为 pattern 源，更灵活可控 - 避免使用跨域未授权的图片——会触发 canvas 污染，导致
toDataURL失败或createPattern报错
创建并设置图案填充样式
调用 ctx.createPattern(image, repetition)，第二个参数控制平铺方式：
-
'repeat'（默认）：横向纵向都平铺 -
'repeat-x'：仅水平重复 -
'repeat-y'：仅垂直重复 -
'no-repeat'：不重复，只显示一次（居左上角）
例如：
const img = new Image();
img.src = 'texture.png';
img.onload = () => {
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
用离屏 canvas 构建动态纹理
若需要程序化生成纹理（如木纹、混凝土、手绘噪点），推荐用离屏 canvas 预绘制小块图案：
- 创建
document.createElement('canvas')，设宽高为 32×32 或 64×64 - 用
2d上下文在其上画随机像素、贝塞尔曲线、多层叠加等 - 将该 canvas 传入
createPattern，即可获得完全可控的无缝纹理
好处是无需外链资源、可实时调整参数（如颜色、密度）、支持动画纹理更新。
注意坐标系与缩放适配
图案本身不随 canvas 变换矩阵缩放——它的单位始终是源图像的原始像素尺寸。若需响应式纹理（比如放大时纹理也变粗），得手动缩放图案源：
- 对离屏 canvas，可在绘制时用
scale()改变笔触/图形大小 - 对图片源，可用
drawImage将其缩放到新 canvas 再作为 pattern，实现“预缩放” - 也可用
setTransform在 fill 前临时修改上下文变换，但会影响整个绘制流程，需谨慎还原
