canvas 的 createpattern() 方法是实现纹理贴图背景最直接高效的方式，通过加载无缝图像并调用 ctx.createpattern(img, 'repeat') 创建图案，赋值给 fillstyle 后自动平铺渲染，支持 translate/scale/rotate 变换控制效果，但需注意跨域、尺寸及性能优化。
Canvas 的 createPattern() 方法是实现纹理贴图背景最直接、高效的方式——它把一张图像（或另一个 canvas）作为“画笔”，重复平铺来填充图形或背景，无需手动计算坐标或拼接。
准备可复用的图案图像
纹理贴图本质是一张小尺寸、无缝衔接的图像（如 64×64 像素的木纹、砖墙、噪点图）。推荐使用 PNG 格式以支持透明度。图像需满足“边缘对齐”：右侧像素应与左侧自然衔接，底部与顶部一致，否则平铺时会出现明显接缝。
- 可用工具（如 Photoshop、GIMP）的「偏移滤镜」+「修补」快速生成无缝纹理
- 也可用纯色 +
ctx.createRadialGradient()或噪声算法在 canvas 中动态生成简易纹理 - 注意：跨域图像（如 CDN 图片）需设置
crossOrigin="anonymous"，否则调用createPattern()会报错
创建并应用图案填充
核心步骤分三步：加载图像 → 获取 pattern 对象 → 赋值给 fillStyle 并绘制。
- 图像加载完成后调用
ctx.createPattern(img, 'repeat')，第二个参数可选'repeat'（默认）、'repeat-x'、'repeat-y'或'no-repeat' - 将返回的 pattern 对象直接赋给
ctx.fillStyle，再调用fillRect()、fill()等即可自动平铺渲染 - 示例：const pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern; ctx.fillRect(0, 0, width, height);
动态控制纹理效果（缩放/旋转/位移）
原生 createPattern() 不支持直接缩放或旋转，但可通过变换 canvas 上下文间接实现：
- 先用
ctx.save()保存当前状态 - 用
ctx.translate()移动原点，ctx.scale(sx, sy)缩放，ctx.rotate(angle)旋转（注意角度为弧度） - 再绘制填充区域（此时 pattern 会随坐标系一同变换）
- 最后
ctx.restore()恢复原始状态，避免影响后续绘制
性能与兼容性提醒
现代浏览器（Chrome/Firefox/Safari/Edge）均完整支持 createPattern()，包括对 video 元素和另一 canvas 的引用。但需注意：
- 频繁重绘大范围 pattern（如全屏背景）时，优先考虑用 CSS
background-image+background-size，更节省 GPU 资源 - 若需每帧更新纹理（如实时视频流），确保图像源已加载完成且未被回收；可缓存 pattern 对象，避免每帧重复创建
- 移动端 Safari 对超大 pattern 图像（如 >2048×2048）可能降级或崩溃，建议纹理尺寸控制在 512×512 以内
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
