在书上看到用<canvas>绘制图像就动手试试，刚开始，我的代码是这样的：

canvas绘图A drawimg of something.); ); ); context.drawImage(image,);

很可惜，在浏览器中只出现了一个黑线框，没有图片。我检查了一下，图片路径没有错，浏览器版本也支持，控制台也没有报错，，不科学啊。

然后去w3school查了一下drawImage()这个方法，还有样例代码，看了一下样例代码感觉差不多啊，于是复制过去，，将图片改成自己本地的图片，然而并没有什么用，还是没有显示出来。纠结万分于是去网上查了一下原因。

window.onload=function(){ ); ); ); context.drawImage(image,); }

这是改过的js代码，我将原来的那些代码放在了onload里面，图片在浏览器中就显示出来了。

因为图片是异步加载，onload 事件会在页面或图像加载完成后立即发生。在之前的代码中，执行js代码的时候图片还没有加载成功，就调用了drawImage()方法，所以图片就无法显示。