你的位置:首页 > 网页设计

[网页设计]canvasdrawImage()方法无法显示图片


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

<!DOCTYPE html><html><head>  <meta charset="utf-8" />  <title>canvas绘图</title></head><body><canvas id="drawimg" width="500" height="500" style="border:1px solid black;">A drawimg of something.</canvas>  <img id="image" src="01.jpg" style="display:none" /><script>var drawimg = document.getElementById("drawimg");var image=document.getElementById("image"); var context = drawimg.getContext("2d");context.drawImage(image,10,10); </script></body></html>

很可惜,在浏览器中只出现了一个黑线框,没有图片。我检查了一下,图片路径没有错,浏览器版本也支持,控制台也没有报错,,不科学啊。
然后去w3school查了一下drawImage()这个方法,还有样例代码,看了一下样例代码感觉差不多啊,于是复制过去,,将图片改成自己本地的图片,然而并没有什么用,还是没有显示出来。纠结万分于是去网上查了一下原因。
<script>window.onload=function(){var drawimg = document.getElementById("drawimg");var image=document.getElementById("image");var context = drawimg.getContext("2d");context.drawImage(image,10,10); }</script>

这是改过的js代码,我将原来的那些代码放在了onload里面,图片在浏览器中就显示出来了。
因为图片是异步加载,onload 事件会在页面或图像加载完成后立即发生。在之前的代码中,执行js代码的时候图片还没有加载成功,就调用了drawImage()方法,所以图片就无法显示。