html5 canvas的drawImage，如果有一堆图片，名字分别是0,1,2,3。。怎么用javascript把每张图片给读出来

我的想法是这样的。但是不行。。出了什么问题？应该怎样弄？
var imgId=0;//

function draw(){
drawImg()
imgId++;
}

function drawImg(){
cxt.clearRect(0,0,500,500)
var img=new Image();
img.src=imgId+'.png';
cxt.drawImage(img,0,0);
}

然后<input type=button value="start" onClick="draw()">

答案：可以参考JavaScript Image Preloader 。
我写了一个代码，你看一下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body onload=preloader()>
<canvas id="pad" width="100%" height="100%"></canvas>
<script language="JavaScript">

var ctx=document.getElementById('pad').getContext('2d');
        var imageObj=new Image();
preloader();
        imageObj.onload=function(){
   for(var i=0;i<6;i++)
           ctx.drawImage(imageObj,0+i*20,0+1*20,80,40);
        }

function preloader()
{
// counter
var i = 0;
// create object
//imageObj = new Image();
// set image list
images = new Array();
images[0]="images/0.jpg"
images[1]="images/1.jpg"
images[2]="images/2.jpg"
images[3]="images/3.jpg"
images[4]="images/4.jpg"
images[5]="images/5.jpg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
</body>
</html>

上一个：<script language="JavaScript" src="***.aspx"></script>JS里面调用页面时什么意思呀
下一个：快实训了，给介绍一个北京好的培训基地，主学asp.net的，我在校学过c#,现在还学了html、javascript,介绍个好的

更多图片编程知识: