下载地址:https://files.cnblogs.com/files/xiandedanteng/52-WalkingHorse.rar,请用Chrome浏览器打开观看动态效果。

图例:

源码:

  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 14:41 horn19782016@163.com</title>
  6. </head>
  7.  
  8. <body onload="draw()">
  9. <canvas id="myCanvus" width="1200px" 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=1200;
  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,1200,90);
  54. ctx.fillStyle = "rgb(137,201,3)";
  55. ctx.fillRect(0, 0, 1200, 90);
  56.  
  57. ctx.strokeStyle = "black";
  58.  
  59. // 绘制地面
  60. ctx.lineWidth = 0.5;
  61. ctx.beginPath();
  62. ctx.fillStyle = "black";
  63. ctx.moveTo(0, 80.5);
  64. ctx.lineTo(1200,80.5);
  65. ctx.stroke();
  66. ctx.closePath();
  67.  
  68. index+=15;
  69. if(index>1320){
  70. index=-120;
  71. }
  72. i=Math.abs((index/15)) % 10;
  73.  
  74. // 截取一块图贴上
  75. ctx.drawImage(img,cds[i].x,cds[i].y,cds[i].width,cds[i].height,index,0,cds[i].width,cds[i].height);
  76.  
  77. setTimeout( function(){
  78. window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
  79. }, 0.15 * 1000 );// 延时执行
  80. }
  81.  
  82. //-->
  83. </script>

2019年3月3日15点04分

[Canvas]奔跑的马的更多相关文章

  1. HTML5 Canvas 奔跑的小狗

    效果如上图,共六个图像切换,形成小狗动态奔跑效果.完整代码和图片请从  https://files.cnblogs.com/files/xiandedanteng/runningDog.rar 下载. ...

  2. [Canvas]Running Horse

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

  3. .NET代码执行效率优化

    NET性能优化方面的总结 从2004年底开始接触C#到现在也有2年多的时间了,因为有C++方面的基础,对于C#,我习惯于与C++对比.现在总结一些.NET方面的性能优化方面的经验,算是对这两年多的.N ...

  4. 【python】列出http://www.cnblogs.com/xiandedanteng中所有博文的标题

    代码: # 列出http://www.cnblogs.com/xiandedanteng中所有博文的标题 from bs4 import BeautifulSoup import requests u ...

  5. Node.js 网页爬虫再进阶,cheerio助力

    任务还是读取博文标题. 读取app2.js // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块, ...

  6. Node.js 网页瘸腿稍强点爬虫再体验

    这回爬虫走得好点了,每次正常读取文章数目总是一样的,但是有程序僵住了情况,不知什么原因. 代码如下: // 内置http模块,提供了http服务器和客户端功能 var http=require(&qu ...

  7. Node.js 网页瘸腿爬虫初体验

    延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...

  8. Xamarin Forms:小马过河,王者归来

    因为我媳妇的原因,去年下半年从零开始学习Android原生开发,做了一个答题库app.整体给我的感觉是入门难度不大,前期折腾一番,大部分时间都是花在开发上面,其实任何一门语言都是如此. 今年我又有另一 ...

  9. 用Canvas写桌球游戏!!!

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 昨天上班的时候闲着无事,就用Canvas写了个桌球游戏来玩玩....所以就拿这游戏上来水一发.或许对一些刚学canvas的人有帮助. 话说 ...

随机推荐

  1. oracle like 条件拼接

    (1) ibatis xml配置:下面的写法只是简单的转义 namelike '%$name$%' (2) 这时会导致sql注入问题,比如参数name传进一个单引号“'”,生成的sql语句会是:nam ...

  2. [Go] Http包 使用简介

    请求的结构 HTTP 的交互以请求和响应的应答模式.Go 的请求我们早就见过了,handler 函数的第二个参数 http.Requests.其结构为: type Request struct { M ...

  3. sigmod2017.org

    http://sigmod2017.org/sigmod-program/#ssession20

  4. iOS本地化应用程序

    因为使用的是xcode4,应用程序本地化的问题跟以前的版本还是有些不同,在网上找了些资料对于xcode4以上的版本资料还是相对较少,有些最后要通过手动创建文件,这样操作实在是太麻烦,所以经过一个下午的 ...

  5. 【Devops】【docker】【CI/CD】Jenkins源码管理,设置gitlab上项目的clone地址 + jenkins构建报错:Please make sure you have the correct access rights and the repository exists.

    注意,如果 jenkins构建报错:Please make sure you have the correct access rights and the repository exists. 而此时 ...

  6. RDIFramework.NET V2.7 Web版本号升手风琴+树型文件夹(2级+)方法

    级+)"界面风格,以展示多级功能菜单,满足用户的要求.Web展示效果例如以下: 要以"手风琴+树型文件夹(2级+)"的风格来展示功能模块,我们须要在"系统配置& ...

  7. EditText 限制输入,自定义样式,监听输入的字符,自动换行

    自动获取焦点 <!-- 添加:<requestFocus /> 会自动获取焦点 --> <EditText android:layout_width="matc ...

  8. 关于GreenPlum的一些整理

    Greenplum数据库架构 Greenplum数据库基本由PostgreSQL核心增强数据库实例组合并衔接成的数据库管理系统,即Greenplum数据在PostgreSQL基础上扩展开发,每个Gre ...

  9. Forward secrecy

    In cryptography, forward secrecy (FS), also known as perfect forward secrecy (PFS), is a property of ...

  10. Java垃圾回收机制(转)

    原文链接:Java垃圾回收机制 1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内 ...