1、drawImage(image,x,y)绘制图片时要等待图片加载完之后再绘制,即监听图片加载事件
错误写法:
canObj = document.getElementById("maincanvas");
canTool = canObj.getContext("2d");
var bg_img = new Image();
bg_img.src = "./images/bg_canvas.png";
canTool.drawImage(bg_img,0,0,750,550);
如果,直接使用drawImage(),没有设置异步监听图片下载事件后再绘制,会导致页面一片空白。
正确写法:
canObj = document.getElementById("maincanvas");
canTool = canObj.getContext("2d");
var bg_img = new Image();
bg_img.onload = function(){
canTool.drawImage(bg_img,0,0,750,550);
}
bg_img.src = "./images/bg_canvas.png";