在使用 createPattern 创建画布填充图案时，若图像未完全加载就调用该方法，会导致渲染为黑色或空白——根本原因是 createPattern 需要图像处于“已加载”状态，而直接执行代码常因异步加载时序问题失败。
在使用 `createpattern` 创建画布填充图案时，若图像未完全加载就调用该方法，会导致渲染为黑色或空白——根本原因是 `createpattern` 需要图像处于“已加载”状态，而直接执行代码常因异步加载时序问题失败。
当你在 W3Schools 在线编辑器中运行 createPattern 示例时，它可能看似“正常工作”，但这往往是一种偶然：W3Schools 的执行环境可能隐式延迟了脚本执行、缓存了图像资源，或其页面生命周期恰好让 元素在脚本运行前完成加载。而在本地开发环境（如 VS Code 搭配 Live Server 或直接双击 HTML 文件）中，图像加载是典型的异步操作，DOM 就绪不等于图像就绪——
标签虽已解析，但 src 对应的远程资源仍在网络请求中，此时调用 c.createPattern(img, 'repeat') 会返回一个无效的 CanvasPattern 对象，后续 fill() 便渲染为默认黑色（或透明，取决于背景）。
✅ 正确做法是：显式监听图像的 load 事件，确保图像数据完全载入后再执行绘图逻辑。以下是修复后的完整示例：
<img src="https://www.spriters-resource.com/resources/sheets/49/52570.png?updated=1635821170" id="lamp" style="max-width:90%" style="max-width:90%" alt="Canvas 图案填充失效的常见原因及正确加载方案" >
<canvas></canvas>
<script>
const img = document.getElementById("lamp");
// ✅ 关键：等待图像加载完成
img.addEventListener('load', () => {
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
// 设置画布尺寸（建议在 load 后设置，避免 resize 干扰）
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 此时 img 已完全加载，createPattern 安全可用
const pattern = c.createPattern(img, 'repeat');
c.fillStyle = pattern;
// 绘制填充矩形
c.fillRect(0, 0, 150, 150);
});
// ❗补充：处理加载失败情况（健壮性必备）
img.addEventListener('error', () => {
console.error('Failed to load sprite image — check URL and CORS permissions.');
});
</script>⚠️ 注意事项：
- 不要省略 load 事件监听：即使设置了 width="0" height="0" 隐藏图像，也不影响其加载行为，但必须等待 load 触发。
- 避免 DOMContentLoaded 陷阱：document.addEventListener('DOMContentLoaded', ...) 仅保证 HTML 解析完成，不保证图像加载完成。
- CORS 限制：若图像来自跨域站点（如此例中的 spriters-resource.com），浏览器可能因缺少 CORS 头拒绝提供图像数据给 Canvas。此时 createPattern 会静默失败，且 img.naturalWidth 可能为 0。解决方案包括：使用支持 CORS 的 CDN、后端代理，或联系资源方启用 Access-Control-Allow-Origin。
- 现代替代方案（可选）：对于复杂游戏场景，推荐使用 Promise 封装图像加载，便于组合与错误处理：
function loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "anonymous"; // 主动声明跨域（若服务端支持）
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
});
}
// 使用示例
loadImage("https://example.com/sprite.png")
.then(img => {
const pattern = c.createPattern(img, 'repeat');
c.fillStyle = pattern;
c.fillRect(0, 0, 150, 150);
})
.catch(err => console.error("Image load failed:", err));总结：createPattern 的可靠性完全依赖图像资源的加载状态。将绘图逻辑置于 img.onload 回调（或等效的 Promise 链）中，是解决“本地黑块、线上正常”这类问题的根本方案。养成对所有外部图像资源做显式加载等待的习惯，是 Canvas 开发的必备实践。
