关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在canvas中,然后使其动起来,代码如下,
情况说明:图像可以绘制,但是使用setInterval以后就一闪而过,然后没有图像;了<!doctypehtml><html><head><metacharset="ut...
情况说明: 图像可以绘制,但是使用setInterval以后就一闪而过,然后没有图像;了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>我的图片</title>
</head>
<body>
<canvas id="Map" width="500" height="500" style="background:gray;"></canvas>
<script>
// 设置绘图环境
var myMap = document.getElementById("Map");
var cxt=myMap.getContext('2d');
// 设置图像位置初始位置的变量
var x=20;
var y=20;
// 创建绘图对象,并且画出来
var img =new Image();
img.src="image/gun.png";
draw();
function draw()
{
cxt.clearRect(0,0,500,500);
x+=10;
y+=50;
img.onload=function()
{
cxt.drawImage(img,x,y,80,80);
}
}
window.setInterval("draw()",100);
</script>
</body>
</html> 展开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>我的图片</title>
</head>
<body>
<canvas id="Map" width="500" height="500" style="background:gray;"></canvas>
<script>
// 设置绘图环境
var myMap = document.getElementById("Map");
var cxt=myMap.getContext('2d');
// 设置图像位置初始位置的变量
var x=20;
var y=20;
// 创建绘图对象,并且画出来
var img =new Image();
img.src="image/gun.png";
draw();
function draw()
{
cxt.clearRect(0,0,500,500);
x+=10;
y+=50;
img.onload=function()
{
cxt.drawImage(img,x,y,80,80);
}
}
window.setInterval("draw()",100);
</script>
</body>
</html> 展开
1个回答
展开全部
首先，你这个代码中最后的setInterval("draw()", 100);应该改为setInterval(draw, 100);第一个参数应该是方法名，虽然你那样写也会有效，但强烈建议不要那么写。然后你说你的代码只是在屏幕上闪一下，那么你在画的时候先调一下cxt.beginPath();画结束的时候掉一下cxt.closePaht();试试，这个w3c网站上有讲解，不确定能不能解决你的问题。
补充：测了一下代码，发现问题是出在你的
img.onload=function()
{
cxt.drawImage(img,x,y,80,80);
}
这里，这边不能在img.onload回调方法中调用画图函数，直接画图就好了， cxt.drawImage(img,x,y,80,80);就这样。
补充：测了一下代码，发现问题是出在你的
img.onload=function()
{
cxt.drawImage(img,x,y,80,80);
}
这里，这边不能在img.onload回调方法中调用画图函数，直接画图就好了， cxt.drawImage(img,x,y,80,80);就这样。
追问
大师 非常感谢你的指导 ,我的图片已经能够动了 我是把img.onload去掉 但是为什么要去掉这个东西啊我有点不清楚,不是说先要通过img.onload将图片加载好了i以后画出来吗 这里为什么不用呢????
追答
图片只要加载一遍就行了，而你这样写相当于每画一次，都要加载一遍，那是不可能的咯。因此你可以把这个图片的加载完成函数放到一个绘画判断之前去执行，也就是如果这个onload没有执行，那么你的绘画interval就不要开始，可能说的不太清纯，你自己再理解理解。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
