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;//指定资源路径};

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