下载地址：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. 聚币网API使用教程 demo

    原文 http://30daydo.com/article/181 目前还在完善,等功能完善了,就更新到csdn. 更新 2017-05-27 官方有API的文档,可是这个文档就像一个草稿一样,两个基 ...

  2. x86 TargetPlatform with XBAPs

    I've got a XAML Browser Hosted Application (XBAP) project that has a dependency on another project t ...

  3. Android 数据存储03之SQLite

    SQLite数据存储 Android 集成了 SQLite 数据库.它存储在 /data/data/< 项目文件夹 >/databases/ 下.Android 开发中使用 SQLite ...

  4. tms web core介绍

    tms web core介绍 TMS Web CORE是基于将Delphi UI代码编译为javascript并以此方式创建的 称为单页应用程序.TMS Web核心应用程序可以包含多个表单. 这些多个 ...

  5. 培养iOS开发新人的一个思路

    坚持两个方法论: 1.发现问题的方法:(熟悉代码的过程) (1)照着一个完整的工程,从最基本的页面开始做起.不懂的地方就问,就查. (2)在阅读代码或拿到需求后要学会对问题进行分解.一个陌生的问题如果 ...

  6. Android ormlite like() function is not working

    //http://stackoverflow.com/questions/7642161/android-ormlite-like-function-is-not-working try { Quer ...

  7. Unity3D导入3DMax模型缩放单位问题深入分析

    “Unity3D导入3DMax制作的模型存在100倍缩放比例”,各Unity3D开发者基本都听过吧. 怎么保证3DMax中制作的1m导入Unity3D后还是1m? 为什么会存在100倍缩放问题? 怎么 ...

  8. 新闻编辑室第三季/全集The Newsroom迅雷下载

    第三季 The Newsroom Season 3 (2014)看点:今日他们终于公布了续订第三季的消息,但同时也宣称第三季将会是<新闻编辑室>的最终季,对剧迷们来说可谓苦乐参半.讲述了一 ...

  9. 浴血黑帮第一季/全集Peaky Blinders迅雷下载

    本季第一季Peaky Blinders Season 1 (2013)看点:<浴血黑帮>Peaky Blinders是从战后伯明翰地区走出的一个传奇黑帮家族,时间要追溯到1919年,家族成 ...

  10. Windows下LuaJIT的编译和使用

    1.下载LuaJIT,download>> 2.编译 开始 –> 程序 –> Microsoft Visual Studio xx –> Visual Studio To ...