html5 canvas的drawImage，如果有一堆图片，名字分别是0,1,2,3。。怎么用javascript把每张图片给读出来
我的想法是这样的。但是不行。。出了什么问题？应该怎样弄？varimgId=0;//functiondraw(){drawImg()imgId++;}functiondra...
我的想法是这样的。但是不行。。出了什么问题？应该怎样弄？
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()"> 展开
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()"> 展开
2个回答
展开全部
可以参考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>
我写了一个代码，你看一下：
<!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>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
没太仔细看，但发现最少两个地方有问题。
1）你function drawImg() 这个函数中，cxt.clearRect(0,0,500,500) 这一句的意思是，清屏，也就是把画布清屏，你每执行一次drawImg(), 画布就被清屏一次，所以理论上只能留下你最后一张图片。
2) cxt.drawImage(img,0,0); 这一句，每次都是同一个位置，图片会重叠，去查一下，drawImage这个函数的参数的用法， drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)， 指定好每个图片的位置。
1）你function drawImg() 这个函数中，cxt.clearRect(0,0,500,500) 这一句的意思是，清屏，也就是把画布清屏，你每执行一次drawImg(), 画布就被清屏一次，所以理论上只能留下你最后一张图片。
2) cxt.drawImage(img,0,0); 这一句，每次都是同一个位置，图片会重叠，去查一下，drawImage这个函数的参数的用法， drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)， 指定好每个图片的位置。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
