关于img.onload()
来源：9-2 编程练习
离离钟
2018-10-23 15:47:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas离屏</title>
<style>
#canvas2 {
display:none;
}
</style>
</head>
<body>
<canvas width="400px" height="400px" id="canvas">您的浏览器不支持canvas</canvas>
<canvas width="400px" height="400px" id="canvas2"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//补充代码
var canvas2=document.getElementById("canvas2");
var context2=canvas2.getContext("2d");
var img = new Image();
img.src = "http://climg.mukewang.com/5aa6633400017bc704170220.jpg";
img.onload = function() {
context.drawImage(img, 0, 0);
// context.drawImage(canvas2, 0, 0, canvas2.width, canvas2.height, 0, 0, canvas.width, canvas.height);
}
context2.fillStyle = "rgba(255, 255, 255, .5)";
context2.font = "30px sans-serif";
context2.fillText("==www.imooc.com==", 50, 200);
context.drawImage(canvas2, 0, 0, canvas2.width, canvas2.height, 0, 0, canvas.width, canvas.height);
</script>
</body>
</html>我知道这样是文字没显示出来，我想问的是，现在这种情况是文字被图片遮挡了吗？
onload事件是在东西都加载完成了才执行的事件，这里的东西包括跟在这个事件之后的js代码吗？是所有的不在onload事件里的js代码都执行完了后，再执行onload事件？
写回答
2回答
-
宝慕林3319090
2018-11-05
文字是被图片挡住了，onload方法里面的代码最后执行，导致文本先绘制，然后才绘制图片。你给canvas背景加个颜色，并移动文本的坐标就可以知道。
文字部分被图片挡住
所以，文本的绘制也要写在onload事件里面。
0 -
好帮手慕星星
2018-10-23
1、并不是被遮挡住了，只是不显示而已，如果给第二个canvas添加一个背景颜色：
在控制台中将display:none;注释掉：
还是显示在原来的位置，并没有被第一个遮盖住，只是隐藏了而已。
2、img的onload事件需要等到下面所有代码执行完毕之后才能执行图片加载成功之后的代码，所以需要将下面的代码添加到img的onload事件中。
祝学习愉快！
0
