本作比前作增加了控制功能，观看动态效果请点此下载代码用Chrome或Firfox浏览器观看。

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>越来越近的女孩 19.3.3 18:11 by:逆火 horn19782016@163.com</title>

     <style>
     #canvas{
        background:#ffffff;
        cursor:pointer;
        margin-left:10px;
        margin-top:10px;
        -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        box-shadow:3px 3px 6px rgba(0,0,0,0.5);
     }

     #controls{
        margin-top:10px;
        margin-left:15px;
     }
     </style>

    </head>

     <body onload="init()">
        <div id="controls">
            <input id='animateBtn' type='button' value='行动'/>
        </div>

        <canvas id="canvas" width="192px" height="192px" >
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
var paused=true;
animateBtn.onclick=function(e){
    paused=! paused;

    if(paused){
        animateBtn.value="行动";
    }else{

        animateBtn.value="暂停";
        window.requestAnimationFrame(animate);
    }
}

var ctx;// 绘图环境
var cds;// 坐标数组
function init(){
    var canvas=document.getElementById('canvas');
    canvas.width=192;
    canvas.height=192;
    ctx=canvas.getContext('2d');

    // 图块坐标
    cds=[
        {'pos':'pic/1.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/2.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/3.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/4.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/5.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/6.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/7.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/8.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/9.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/10.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/11.gif','x':'0', 'y':'0','width':'192','height':'192'},
        {'pos':'pic/12.gif','x':'0', 'y':'0','width':'192','height':'192'},
   ];
};

var index=0;
var i=0;
function animate(){
    if(!paused){
        index++;
        if(index>108){
            index=0;
        }
        i=index % 12;

        img=new Image();
        img.src=cds[i].pos;

        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.10 * 1000 );// 延时执行
    }
}
//-->
</script>

[Canvas]越来越近的女孩的更多相关文章

  1. 【Canvas真好玩】从黑客帝国开始

    前言 笔者之前有一段时间一直在学习Canvas相关的技术知识点,通过参考网上的一些资料文章,学着利用简单的数学和物理知识点实现了一些比较有趣的动画效果,最近刚好翻看到以前的代码,所以这次将这些代码实践 ...

  2. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  3. View优化

    前面写了个View画圆弧,为了让他和底层图片效果融合,采用先把圆弧画到和图片一样大小的画布上,然后用canvas的变换位图方法映射过去. bitmapWithReflection = Bitmap.c ...

  4. HT for Web列表和3D拓扑组件的拖拽应用

    很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表中拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果. 首先 ...

  5. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

  6. 《Braid》碎片式台词

    谁见到过风? 你没有,我也没有. 但当树儿低下头, 便是风儿经过时. 便是风儿穿过的时候. 但当树叶微微摇首, 你没有,我也没有. 谁见到过风? 二.时间与宽恕 1.提姆要出发了!他要去寻找并救出公主 ...

  7. 难得一见的HTML5动画欣赏及源码下载

    今天要给大家分享一些很酷的HTML5动画演示,并且提供源代码的下载.大部分HTML5动画都是通过canvas实现,当然也有基于SVG的,尤其是第一个,看起来很简单,但是创意却不错. 1.HTML5梦幻 ...

  8. 时间序列分析算法【R详解】

    简介 在商业应用中,时间是最重要的因素,能够提升成功率.然而绝大多数公司很难跟上时间的脚步.但是随着技术的发展,出现了很多有效的方法,能够让我们预测未来.不要担心,本文并不会讨论时间机器,讨论的都是很 ...

  9. 深入浅出Android开发之Surface介绍

    一 目的 本节的目的就是为了讲清楚Android中的Surface系统,大家耳熟能详的SurfaceFlinger到底是个什么东西,它的工作流程又是怎样的.当然,鉴于SurfaceFlinger的复杂 ...

随机推荐

  1. Golang 特性简介

    by sheepbao 主要大概介绍go语言的历史和特性,简单的入门. 来历 很久以前,有一个IT公司,这公司有个传统,允许员工拥有20%自由时间来开发实验性项目.在2007的某一天,公司的几个大牛, ...

  2. TrinityCore3.3.5环境搭建

    说起TrinityCore,可能知道的人不多,但是说起MaNGOS(芒果)知道的人应该就不少了.MaNGOS是一个魔兽私服服务器端,TrinityCore继承自TrinityCore并且做了优化,一直 ...

  3. WebStorm中使用ES6的几种方式

    本篇总结几种在WebStorm下使用ES6的方式. 首先要选择Javascript的版本.依次点击"File","Settings","Languag ...

  4. DirectX全屏游戏中弹出窗口(转)

    一直有人问如何在DirectX全屏游戏中弹出窗口就象金山游侠一样.我答应过要给出原码,只是一直没有时间整理,不过现在总算是弄玩了.代码不长,大致作了些注释,但愿你能看懂:)按照我的说明一步步作应该就能 ...

  5. EXCEL密码破解/破解工作表保护密码

    网上有很多这个代码,但很多朋友并不太了解如何运用在此做了一些整理,希望对大家有所帮助! 注:很多时候会因为忘记密码丢失重要EXCEL文件而烦恼,这份代码就能帮你找回,仅仅出之这个初衷,如因为这个代码让 ...

  6. linux搭建C开发环境

    目前决大多 数的Linux用户对Linux的了解还处于比较低级的层次,他们可能会几条命令.会配几种服务.会用rpm来安装软件.会操作KDE/Gnome界机等等,但是当他们遇到一些需要编译安装的软件时, ...

  7. 使用PHP+Sphinx建立高效的站内搜索引擎

      1.    为什么要使用Sphinx   假设你现在运营着一个论坛,论坛数据已经超过100W,很多用户都反映论坛搜索的速度非常慢,那么这时你就可以考虑使用Sphinx了(当然其他的全文检索程序或方 ...

  8. maven的groupid和artifactId

    groupid和artifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓库去,你想要找到你的项目就必须根据这两个id去查找. groupId一般分为多个段 ...

  9. 加州靡情第一至七季/全集Californication迅雷下载

    加州靡情 第一至七季 Californication Season 1-7 (2007-2014)本季看点:2007-2014,7季,84集.电视圈一直有个怪现象,有许多演员在非常成功剧集完结之后,反 ...

  10. 危机边缘第一季/全集Fringe迅雷下载

    本季Fringe Season 2 第二季(2008)看点:一架从汉堡飞往波士顿航班安全着陆,飞机上的机组成员和乘客却全部死亡.这起离奇案件揭开了一连串奇异.危险事件的序幕. 故事将主要讲述年轻的FB ...