在书上看到用<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()方法，所以图片就无法显示。
时间： 2024-10-13 23:27:13