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

图例：

代码：

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

     <body onload="draw()">
        <canvas id="myCanvus" width="120px" 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=120;
    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,120,90);
    ctx.fillStyle = "rgb(137,201,3)";
    ctx.fillRect(0, 0, 120, 90);

    ctx.strokeStyle = "black";

    // 绘制地面
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.moveTo(0, 80);
    ctx.lineTo(120,80);
    ctx.stroke();
    ctx.closePath();

    index++;
    if(index>100){
        index=0;
    }
    i=index % 10;

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

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

//-->
</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. error: internal error: unable to execute QEMU command &#39;migrate&#39;: this feature or command is not cur

    感谢朋友支持本博客,欢迎共同探讨交流,因为能力和时间有限.错误之处在所难免,欢迎指正. 假设转载.请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  2. firedac连接WINDOWS的ORACLE

    firedac连接WINDOWS的ORACLE 首先安装OCI FOR WINDOWS.OCI分WIN32和WIN64,且OCI的版本要和ORACLE的版本相一致才行. FIREDAC指定OCI驱动程 ...

  3. Android Butterknife框架

    Android Butterknife框架 注解攻略 时间 2014-02-27 09:28:09  Msquirrel原文  http://www.msquirrel.com/?p=95 一.原理. ...

  4. android加密DESede/CBC/PKCS5Padding

    from://http://my.oschina.net/u/269082/blog/56163 工作中需要和HPH对接,接口一些敏感信息,讨论后用3DES加密,由于我做的android邮件客户端是依 ...

  5. 创建、修改、删除ORACLE表空间

    //创建表空间 create tablespace MyFirstSpace datafile '/opt/oracle/app/oracle/product/9.2.0/dbs/MyFirstSpa ...

  6. mysql between and 遇到日期查询边界问题

    最近实现一个按日期范围查询列表,例如输入的是日期 2015-11-01到2015-11-03,想得到1号到3号的数据, 执行 select * from table where create_date ...

  7. 识骨寻踪第一季/全集Bones迅雷下载

    第一季 Bones Season 1 (2005)看点:这是一部专门从“骨头”上寻找破案线索的刑侦剧.女博士布莱南绰号“骨头”(艾米丽·丹斯切尔 Emily Deschanel 饰),是个学识渊博.专 ...

  8. 星际之门SG1第一至十季/全集Stargate SG-1迅雷下载

    英文译名 Stargate SG-1 (第一至十季) (1997-2008)Syfy.本季看点:<星际之门 SG-1>1997年起在美播出第一季,并于全球30多个国家播映,反应热烈,今年( ...

  9. Smali基本语法

    .field private isFlag:z 定义变量 .method 方法 .parameter 方法参数 .prologue 方法开始 .line 12 此方法位于第12行 invoke-sup ...

  10. Android使用代码模拟HOME键的功能

    Intent intent= new Intent(Intent.ACTION_MAIN); intent.addCategory(Intent.CATEGORY_HOME); intent.addF ...