核心部分都有代码注释，如有不懂得地方，请留言，必答
-
<!doctype html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>canvas实现人物运动</title>
-
<style>
-
*{padding:0;margin:0;}
-
</style>
-
</head>
-
<body>
-
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #ccc"></canvas>
-
<script>
-
setInterval(run,1000);
-
var src1="images/1.jpg";
-
var src2="images/2.jpg";
-
var src3="images/3.jpg";
-
var imgArr=[src1,src2,src3]; //要循环的图片数组
-
var im=new Image(); //新建一个图片对象
-
im.src=src1;
-
var num=0;
-
function run(){
-
var c=document.getElementById('myCanvas');
-
var ctx=c.getContext('2d');
-
ctx.clearRect(0,0,200,200); //清除画布
-
im.onload=function(){
-
ctx.drawImage(im,0,0,200,200); //等图片加载完毕后在画布上画图
-
}
-
if(num>=imgArr.length-1){
-
num=0;
-
}
-
else{
-
num++;
-
}
-
im.src=imgArr[num];
-
}
-
run();
-
</script>
-
</body>
-
</html>
阅读(1326) | 评论(0) | 转发(0) |
