canvas 的 createpattern 方法用于创建图案填充，支持 img、canvas、video 元素作为源，需确保源已加载/有画面且跨域合规；repetition 参数控制平铺方式；图案受变换矩阵影响，需注意上下文状态管理。
Canvas 的 createPattern 方法用于创建图案填充（如图片、另一块 canvas 或视频帧），再赋给 fillStyle 或 strokeStyle，实现重复铺满的视觉效果。关键在于图案源必须已加载完成，且坐标系与绘制区域匹配。
图案源必须是合法图像对象
支持的源包括：<img> 元素、<canvas></canvas> 元素、<video></video> 元素（当前帧）。不能直接传 URL 字符串或 base64 数据（需先转为 Image 对象）。
- 使用
new Image()加载图片，确保在onload回调中调用createPattern - 若用 canvas 作图案源，该 canvas 应已绘制好内容（如文字、图形）
- 视频需处于播放状态，且调用
drawImage(video, ...)前确保有画面
创建并应用图案填充
调用 ctx.createPattern(image, repetition)，其中 repetition 是重复方式字符串：
-
"repeat"：横向纵向均平铺（默认） -
"repeat-x"：仅水平重复 -
"repeat-y"：仅垂直重复 -
"no-repeat"：不重复，只显示一次（居左上角）
返回值是 CanvasPattern 对象，可直接赋给 fillStyle 后调用 fill()：
const pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern; ctx.fillRect(0, 0, 300, 200);
注意坐标变换对图案的影响
图案本身会受当前 canvas 变换矩阵影响（如 scale、rotate、translate）。若希望图案按原始尺寸平铺，应在创建 pattern 前重置变换，或在绘制前保存/恢复上下文状态：
- 调用
ctx.save()→ 设置变换 → 绘制 →ctx.restore() - 或用
ctx.setTransform(1, 0, 0, 1, 0, 0)清除所有变换后再创建 pattern - 图案的“起点”默认是画布原点（0,0），可通过
transform移动整个图案位置
常见问题与避坑提示
以下情况会导致图案不显示或报错：
- 图片未加载完成就调用
createPattern→ 控制台报错 “InvalidStateError” - 图片跨域但未设置
crossOrigin="anonymous"→ 图案为空白（尤其 CDN 或第三方图） - 图案源 canvas 尺寸为 0 × 0 或内容为空 → 平铺结果不可见
- 在 pattern 创建后修改了源图像（如重绘 canvas）→ 已创建的 pattern 不会自动更新，需重新创建
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
