下载地址：https://files.cnblogs.com/files/xiandedanteng/52-RunningHorse.rar，下载完毕后请使用Chrome浏览器打开Index.html查看。

图例：

代码：

  1. <!DOCTYPE html>
  2. <html lang="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5.      <title>奔跑的马 19.3.3 13:20 horn19782016@163.com</title>
  6.     </head>
  7.  
  8.      <body onload="draw()">
  9.         <canvas id="myCanvus" width="120px" height="90px" style="border:1px dashed black;">
  10.             出现文字表示你的浏览器不支持HTML5
  11.         </canvas>
  12.      </body>
  13. </html>
  14. <script type="text/javascript">
  15. <!--
  16. var ctx;// 绘图环境
  17. var cds;// 从大图中取小图的坐标数组
  18. var img;// 大图
  19.  
  20. function draw(){
  21.     var canvas=document.getElementById('myCanvus');
  22.  
  23.     canvas.width=120;
  24.     canvas.height=90;
  25.  
  26.     ctx=canvas.getContext('2d');
  27.  
  28.     img=new Image();
  29.     img.src="runningHorse.jpg";
  30.  
  31.     // 图块坐标
  32.     cds=[
  33.         {'x':'0', 'y':'10','width':'120','height':'80'},
  34.         {'x':'120','y':'10','width':'120','height':'80'},
  35.         {'x':'240','y':'10','width':'120','height':'80'},
  36.         {'x':'360','y':'10','width':'120','height':'80'},
  37.         {'x':'480','y':'10','width':'120','height':'80'},
  38.  
  39.         {'x':'0', 'y':'100','width':'120','height':'80'},
  40.         {'x':'120','y':'100','width':'120','height':'80'},
  41.         {'x':'240','y':'100','width':'120','height':'80'},
  42.         {'x':'360','y':'100','width':'120','height':'80'},
  43.         {'x':'490','y':'100','width':'120','height':'80'},
  44.    ];
  45.  
  46.     animate();
  47. };
  48.  
  49. var index=0;
  50. var i=0;
  51.  
  52. function animate(){
  53.     ctx.clearRect(0,0,120,90);
  54.     ctx.fillStyle = "rgb(137,201,3)";
  55.     ctx.fillRect(0, 0, 120, 90);
  56.  
  57.     ctx.strokeStyle = "black";
  58.  
  59.     // 绘制地面
  60.     ctx.beginPath();
  61.     ctx.fillStyle = "black";
  62.     ctx.moveTo(0, 80);
  63.     ctx.lineTo(120,80);
  64.     ctx.stroke();
  65.     ctx.closePath();
  66.  
  67.     index++;
  68.     if(index>100){
  69.         index=0;
  70.     }
  71.     i=index % 10;
  72.  
  73.     // 截取一块图贴上
  74.     ctx.drawImage(img,cds[i].x,cds[i].y,cds[i].width,cds[i].height,0,0,cds[i].width,cds[i].height);    
  75.  
  76.     setTimeout( function(){
  77.         window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
  78.     }, 0.20 * 1000 );// 延时执行
  79. }
  80.  
  81. //-->
  82. </script>

2019年3月3日14点38分

[Canvas]Running Horse的更多相关文章

  1. [Canvas]New Running Dog

    欲看效果请下载后用Chrome浏览器打开index.html观看,下载地址:https://files.cnblogs.com/files/xiandedanteng/51-NewRunningDog ...

  2. canvas转盘抽奖

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

  3. HTML5 canvas 在线画笔绘图工具（四）

    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成. TDrawHandler需要完成以下工作 1.聚集类用于管理绘图的命令 TCommand 2.管理鼠标事件 ...

  4. html加javascript和canvas类似超级玛丽游戏

    html加javascript和canvas制作 代码来源于网上 复制可用 <!doctype html><html lang="en"> <head ...

  5. h5 canvas 图片上传操作

    最近写的小 demo,使用的是h5的 canvas来对图片进行放大,移动,剪裁等等这是最原始的代码,比较接近我的思路,后续会再对格式和结构进行优化 html: <pre name="c ...

  6. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  7. Canvas：飞机大战 -- 游戏制作

    Canvas:飞机大战 最开始我们要初始化信息,我们有五个状态:游戏封面,加载状态,运行状态,游戏暂停,游戏结束. 我们还需要  得分--score,生命--life. var START = 1;/ ...

  8. [Canvas]计时表/秒表

    欲观看效果请点击下载,然后用浏览器打开index.html查看. 本作 Github地址:https://github.com/horn19782016/StopWatch 图例: 代码: <! ...

  9. canvas高级动画示例

    canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...

随机推荐

  1. 网站前端优化技术 BigPipe分块处理技术

    前端优化已经到极致了么?业务还在为看到不停的而揪心么?还在为2秒率不达标苦恼么? 好吧我知道答案,大家一如既往的烦恼中... 那么接下来我们看看,facebook,淘宝,人人网,一淘都是怎么做前端优化 ...

  2. javascript循环性能比较

    1.数组循环遍历方法 javascript传统的数组遍历有for循环,while循环,以及for-in.本篇文章要比较的是以下几种循环遍历方法: 遍历方式 备注 正向for循环   逆向for循环 减 ...

  3. 谈谈Unicode编码，简要解释UCS、UTF、BMP、BOM等名词

    这是一篇程序员写给程序员的趣味读物.所谓趣味是指可以比较轻松地了解一些原来不清楚的概念,增进知识,类似于打RPG游戏的升级.整理这篇文章的动机是两个问题: 问题一: 使用Windows记事本的“另存为 ...

  4. clientX, clientY，offsetX, offsetY,screenX, screenY, x, y

    clientX, clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0: offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置,当 ...

  5. Linux下Tomcat的启动、关闭

    在Linux系统下,启动和关闭Tomcat使用命令操作. 进入Tomcat下的bin目录 1 cd /java/tomcat/bin 启动Tomcat命令 1 ./startup.sh 停止Tomca ...

  6. python测试开发django-39.xadmin详情页面布局form_layout

    前言 xadmin的详情页面默认是一行展示一个字段,可以使用form_layout对详情页面的布局重新设计. 可以设置必填和非必填字段,也可以设置不显示,不可以编辑的字段. models模块 先在mo ...

  7. Java 单例模式的常见应用场景

    单例模式(Singleton)也叫单态模式,是设计模式中最为简单的一种模式,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象,也因此 ...

  8. putty adb

    putty.exe -adb -P 5037 transport-usb 网络调试也是可以的 先connect 再执行上面的命令 http://files.cnblogs.com/files/ahuo ...

  9. Prometheus 初体验

    本文环境 Redhat Linux 6.7, Prometheus 2.2.1,node_exporter 1.5.2 介绍 Prometheus 是2012年由 SoundCloud 开源的系统监控 ...

  10. Spearman Rank（斯皮尔曼等级）相关系数

    转自:http://blog.csdn.net/wsywl/article/details/5859751 1.简介 在统计学中,斯皮尔曼等级相关系数以Charles Spearman命名,并经常用希 ...