html5-如何加载资源，在canvas上drawimage?

这篇可以说是我做的一个笔记，原文如下。

http://www.ituring.com.cn/article/details/918

第一，资源载入和双缓存的问题
我们一般写画图的代码：

var ctx = mycanvas.getContext('2d');
var img = new image();
img.src=”1.png”;
ctx.drawImage(img);

在实际应用中，这会有很多问题。有时候图片会显示不出来。怎么办？

使用双缓存绘图

var game = {};//游戏对象
game.imgResource = [
       {id: 'a1', src: 'image/1.jpg'},
    {id: 'a2', src: 'image/2.png'},
    {id: 'a3', src: ' image/3.png'}
];//游戏对象中的图片资源对象序列化
var source={};//资源对象
source.imgs = {};//开辟图片内存缓冲区
for(var i ==0;i<game.imgResource.length;i++){//开始资源预载
    source.loadImg(game.imgResource[i].id, game.imgResource[i].src);
}
source.loadImg = function(id, src) {//全部存入内存中
    source.imgs[id] = new Image();//开始存入内存中
    source.imgs[id].src = src;//指定资源路径
};

第二，锯齿的解决办法
完全参考原文吧