情况说明: 图像可以绘制,但是使用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>
补充：测了一下代码，发现问题是出在你的
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就不要开始，可能说的不太清纯，你自己再理解理解。
本回答被提问者和网友采纳