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

图例：

源码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>行走的马 19.3.3 14:41 horn19782016@163.com</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="1200px" height="90px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
var ctx;// 绘图环境
var cds;// 从大图中取小图的坐标数组
var img;// 大图

function draw(){
    var canvas=document.getElementById('myCanvus');

    canvas.width=1200;
    canvas.height=90;

    ctx=canvas.getContext('2d');

    img=new Image();
    img.src="runningHorse.jpg";

    // 图块坐标
    cds=[
        {'x':'0', 'y':'10','width':'120','height':'80'},
        {'x':'120','y':'10','width':'120','height':'80'},
        {'x':'240','y':'10','width':'120','height':'80'},
        {'x':'360','y':'10','width':'120','height':'80'},
        {'x':'480','y':'10','width':'120','height':'80'},

        {'x':'0', 'y':'100','width':'120','height':'80'},
        {'x':'120','y':'100','width':'120','height':'80'},
        {'x':'240','y':'100','width':'120','height':'80'},
        {'x':'360','y':'100','width':'120','height':'80'},
        {'x':'490','y':'100','width':'120','height':'80'},
   ];

    animate();
};

var index=0;
var i=0;

function animate(){
    ctx.clearRect(0,0,1200,90);
    ctx.fillStyle = "rgb(137,201,3)";
    ctx.fillRect(0, 0, 1200, 90);

    ctx.strokeStyle = "black";

    // 绘制地面
    ctx.lineWidth = 0.5;
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.moveTo(0, 80.5);
    ctx.lineTo(1200,80.5);
    ctx.stroke();
    ctx.closePath();

    index+=15;
    if(index>1320){
        index=-120;
    }
    i=Math.abs((index/15)) % 10;

    // 截取一块图贴上
    ctx.drawImage(img,cds[i].x,cds[i].y,cds[i].width,cds[i].height,index,0,cds[i].width,cds[i].height);    

    setTimeout( function(){
        window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
    }, 0.15 * 1000 );// 延时执行
}

//-->
</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. linux socket编程示例

    #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include &l ...

  2. asp.net core读取appsettings.json，如何读取多环境开发配置

    摘要 在读取appsettings.json文件中配置的时候,觉得最简单的方式就是使用asp.net core注入的方式进行读取了. 步骤 首先根据配置项的结构定义一个配置类,比如叫AppSettin ...

  3. [EF Core]数据迁移（二）

    摘要 在实际项目中,大多都需要对业务逻辑以及操作数据库的逻辑进行分成操作,这个时候该如何进行数据的迁移呢? 步骤 上篇文章:EF Core数据迁移操作 比如,我们将数据上下文放在了Data层. 看一下 ...

  4. .Net Discovery 系列之六--深入浅出.Net实时编译机制(下)

    接上文 在初始化时,HashTable中各个方法指向的并不是对应的内存入口地址,而是一个JIT预编译代理,这个函数负责将方法编译为本地代码.注意,这里JIT还没有进行编译,只是建立了方法表! 下表(表 ...

  5. 玩一下C#的语音识别

    在.NET4.0中,我可以借助System.Speech组件让电脑来识别我们的声音. 以上,当我说"name",显示"Darren",我说"age&q ...

  6. C#编程（五十五）----------HashSet和SortedSet

    集 饱含不重复元素的集合称为”集(set)”. .NET4包含两个集(HashSet<T>和SortedSet<T>),他们都实现ISet<T>接口.HashSet ...

  7. 关于struts2种的action运行两次，或多次，或反复运行的bug

    今天在做项目的时候发现一个bug,就是action会莫名其妙的运行两次.网上搜了非常多帖子,关于这个问题也得到了一些处理方法,可是没有我想要的,造成运行两次活多次的问题呢,有非常多种原因,我在这里仅仅 ...

  8. windows快速删除大量文件

    del /f/s/q dirname> nulrmdir /s/q dirname

  9. C# 访问操作注册表整理

    一..net注册表操作简介 .net中Registry 类,RegistryKey 类提供了操作注册表的接口 RegistryValueKind,用于指定操作注册表的数据类型. 二.使用实例 //获取 ...

  10. Netty精粹之JAVA NIO开发需要知道的

    学习Netty框架以及相关源码也有一小段时间了,恰逢今天除夕,写篇文章总结一下.Netty是个高效的JAVA NIO框架,总体框架基于异步非阻塞的设计,基于网络IO事件驱动,主要贡献在于可以让用户基于 ...