- 环境
浏览器:版本 57.0.2987.133 (64-bit)
OS:macOS:10.12.3
遇到的问题
昨天做了美图的前端笔试题,其中一题是给定一张图片URL,将其画在canvas上,canvas我是会用的,
但是drawImage这个函数的接口我记不大清了,所以回来我又试了下。后来发现我竟然画不出来了。
先给出我的示例代码
<img id="myImg" src="img/001.jpg">
<canvas id="myCanvas" width="200px" height="200px"></canvas>
<script type="text/javascript">
//window.onload=function() {
var myImage = document.getElementById("myCanvas");
var cxt = myImage.getContext("2d");
var img = document.getElementById("myImg");
console.log(img);
cxt.drawImage(img, 50, 50);
cxt.drawImage(img, 125, 125);
cxt.drawImage(img, 210, 210);
//}
</script>
结果(在inspect模式下)是这样的:
显然,这里只有img,没有canvas,经过诸多尝试,仍然未解决,后来我发现,当不用开发者模式访问图片,则需要两次刷新才能得到canvas:第一次刷新得到上图,第二次刷新得到下图:
显然,访问两次才能得到canvas,这样的访问方式是不正常的,那么问题出现在哪里呢?我在stackoverflow上看到了解答:
这是因为img是异步加载的啊!!!当图片已经还没加载完成,canvas相关的JS代码已经在执行了。没有图片的drawImage自然是不能成功的。
所以正确的办法是onload:
<img id="myImg" src="img/001.jpg">
<canvas id="myCanvas" width="200px" height="200px"></canvas>
<script type="text/javascript">
window.onload=function() {
var myImage = document.getElementById("myCanvas");
var cxt = myImage.getContext("2d");
var img = document.getElementById("myImg");
console.log(img);
cxt.drawImage(img, 50, 50);
cxt.drawImage(img, 125, 125);
cxt.drawImage(img, 210, 210);
}
</script>