canvas之image绘制的注意事项

这是一套标准的绘制image的代码，注意红色部分如果替换成蓝色的代码则将无法绘制，而且也不报错，新手自己写代码常常会遇到的问题，而且这个问题你在本地的写静态页面的时候还不会爆发，当你部署到apache或者什么服务器上的时候这个问题才会显现出来。

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src='http://localhost:9000/public/images/favicon.png';
img.οnlοad=function(){
 cxt.drawImage(img,0,0);
 }

 cxt.drawImage(img,0,0);    

上边的代码我们是可以优化的，为了避免每画一次就加载一次图片，我们可以在初始化的时候就把所有需要的image图片创建了，而且每个图片的 onload 触发没有完毕就不准执行下边的其他初始化和绘制,如下所示

var img=new Image();
img.src='http://localhost:9000/public/images/favicon.png';
img.οnlοad=function(){
$(init);
}

还有一种优化方式就是用<image src="">标签来下载图片，并把样式设为隐藏，然后 getById得到image对象。

现在想一想，其实第一种的那种写法，真的是每次都会重新加载图面吗？缓存不起作用吗？还需要有优化吗？有待证明。