html5 canvas知识

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";