动态效果请点此下载文件并使用Chrome或者FireFox浏览器观看。

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>走进的女孩 19.3.3 15:47 horn19782016@163.com</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="192px" height="192px" 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=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'},
   ];

    animate();
};

var index=0;
var i=0;

function animate(){
    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>

2019年3月3日16点22分

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

  1. [Canvas]越来越近的女孩

    本作比前作增加了控制功能,观看动态效果请点此下载代码用Chrome或Firfox浏览器观看. 图例: 代码: <!DOCTYPE html> <html lang="utf ...

  2. canvas学习笔记：canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  3. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  4. canvas图像以及剪切

    图像篇: 代码: 1 /** 2 * Created by Administrator on 2016/1/28. 3 */ 4 function draw (id){ 5 var canvas = ...

  5. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  6. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  7. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  8. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  9. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

随机推荐

  1. swift笔记(二) —— 运算符

    基本运算符 Swift支持大部分的标准C语言的操作符,而且做了一些改进,以帮助开发人员少犯低级错误,比方: 本该使用==的时候,少写了个=, if x == y {-} 写成了 if x = y {- ...

  2. TrinityCore 魔兽世界私服11159 完整配置

    为什么要研究TrinityCore ? (1)它是一个完整成熟的可运行调试的网游服务器框架. (2)它是一个跨平台的标准C++编写的项目,在Windows.Linux.MacOSX上都可编译运行. ( ...

  3. Net Framework 2.0 MSI returned error code 1603解决方法

    出现这种情况的原因,主要是用ghost做的系统,有很多系统中把ie给绑架了.下面的截图就是ghost做的系统中注册表的显示,通过上面的方法就可以解决这种Microsoft .NET Framework ...

  4. Lombok使用详解（转）

    本文转自https://blog.csdn.net/u010695794/article/details/70441432 2017年04月22日 15:17:00 阅读数:10394 Lombok使 ...

  5. spring-boot项目在eclipse中指定配置文件启动

    原文:https://blog.csdn.net/ztx114/article/details/80076339 如下图我的项目有三个配置文件,假如我向指定用application-test.yml启 ...

  6. VisualStudio：如何监控 ADO.NET？

    背景 很多场景下我们都需要监控 ADO.NET,如:查看某些框架(ORM)生成的 SQL.如何在不能使用 SQL Profile 的情况下监控 SQL 呢?VS 为我们提供了一个工具,本文做一些介绍! ...

  7. RTP 有效负载(载荷)类型，RTP Payload Type

    转自:http://blog.csdn.net/caoshangpa/article/details/53008018 版权声明:本文为灿哥哥http://blog.csdn.net/caoshang ...

  8. tomcat使用不同jdk的解决方法

    1,修改bin文件夹下面的catalina.bat文件,把如下内容 rem ----- Execute The Requested Command -------------------------- ...

  9. 单身毒妈第一至八季/全集Weeds迅雷下载

    本季第一.二.三.四季 Weeds (2005-2008) 看点:由于丈夫的意外身亡,Nancy Botwin成了一名膝下抚有两子的单身母亲,一无所长的她找不到一份能养活一家三口的工作,但天无绝人之路 ...

  10. 关于SqlBulkCopy SQL批量导入需要注意，列名是区分大小写的

    最近在做数据从Excel批量导入MSSQL时,传统的是使用Insert Into Table方法,不过这个方便比较慢 通过使用 SqlBulkCopy 可以批量导入到数据库. 默认批量导入数据库,需要 ...