Canvas中图片无法绘制问题：代码无报错但图片不显示

嘿，我来帮你揪出这个问题！你的代码没报错但图片不显示，主要是两个小细节没处理好，咱们一步步搞定：

问题1：window.onload的绑定方式错了 #

你写的window.onload=init();会立刻执行init函数，而不是等页面完全加载后再调用。这时候canvas元素可能还没被渲染到DOM里，后续获取canvas元素和上下文的操作其实是无效的（只不过没抛出报错而已）。

正确的写法是把函数本身赋值给onload，去掉括号：

window.onload = init;

问题2：忽略了图片加载的异步特性 #

Image对象加载图片是异步过程，你刚设置monImg.src就调用drawImage，这时候图片还没加载完成，浏览器根本没东西可画。必须等图片加载完成后再执行绘制操作，给图片绑定onload事件就能解决这个问题。

修正后的完整代码 #

<html>
<script>
var canvas, context;
function init(){
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    monImg = new Image();
    
    // 先绑定加载完成事件，再设置图片路径
    monImg.onload = function() {
        context.drawImage(monImg, 300, 300);
    }
    
    // 可选：添加错误监听，方便排查路径问题
    monImg.onerror = function() {
        console.log("图片加载失败！请检查img/angular.png的路径是否正确");
    }
    
    monImg.src = "img/angular.png";
}
// 正确绑定load事件
window.onload = init;
</script>
<body>
<canvas id="canvas" width="1920" height="1080"></canvas>
</body>
</html>

额外注意点 #

• 确认图片路径：img/angular.png需要和你的html文件处于正确的层级关系，比如html在根目录，那么img文件夹也要在根目录里，否则图片会加载失败。
• 可以打开浏览器的开发者工具（F12），切换到Network标签页，刷新页面看看图片的请求状态，如果是404，那就是路径问题啦。

内容的提问来源于stack exchange，提问作者Clément