Chinaunix首页 | 论坛 | 博客
  • 博客访问: 154172
  • 博文数量: 42
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 399
  • 用 户 组: 普通用户
  • 注册时间: 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文(42)

文章存档

2016年(28)

2015年(14)

我的朋友

分类: HTML5

2016-06-12 16:45:02

核心部分都有代码注释,如有不懂得地方,请留言,必答

点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas实现人物运动</title>
  6.     <style>
  7.        *{padding:0;margin:0;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <canvas id="myCanvas" width="200" height="200" style="border:1px solid #ccc"></canvas>
  12.     <script>
  13.        setInterval(run,1000);
  14.        var src1="images/1.jpg";
  15.        var src2="images/2.jpg";
  16.        var src3="images/3.jpg";
  17.        var imgArr=[src1,src2,src3]; //要循环的图片数组
  18.        var im=new Image(); //新建一个图片对象
  19.        im.src=src1;
  20.        var num=0;
  21.        function run(){
  22.           var c=document.getElementById('myCanvas');
  23.           var ctx=c.getContext('2d');
  24.           ctx.clearRect(0,0,200,200); //清除画布
  25.           im.onload=function(){
  26.               ctx.drawImage(im,0,0,200,200); //等图片加载完毕后在画布上画图
  27.           }
  28.         if(num>=imgArr.length-1){
  29.             num=0;
  30.         }
  31.         else{
  32.             num++;
  33.         }
  34.         im.src=imgArr[num];
  35.        }
  36.        run();
  37.     </script>
  38. </body>
  39. </html>

阅读(1280) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~