动态效果请点此下载文件并使用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. STM32的CRC32 实现代码 -- Ether

    uint32_t reverse_32( uint32_t data ) { asm("rbit r0,r0"); return data; } ; uint32_t crc32_ ...

  2. Magent搭建Memcached集群

    原文地址:http://ultrasql.blog.51cto.com/9591438/1636374 Memcached集群介绍 由于Memcached服务器与服务器之间没有任何通讯,并且不进行任何 ...

  3. 自己动手实现一个MVVM库

    我们知道的,常见的数据绑定的实现方法 1.数据劫持(vue):通过Object.defineProperty() 去劫持数据每个属性对应的getter和setter2.脏值检测(angular):通过 ...

  4. WMAppManifest.xml

    大家在编写Windows phone的程序的时候可能并没有关注WMAppManifest.xml,其实这个档案是记录了应用程式的相关属性描述,以及定义应用程式的功能性的..所以还是相当重要的一个文档, ...

  5. Windows Phone本地数据库（SQLCE）：13、更新数据（翻译）

    这是“windows phone mango本地数据库(sqlce)”系列短片文章的第十三篇. 为了让你开始在Windows Phone Mango中使用数据库,这一系列短片文章将覆盖所有你需要知道的 ...

  6. maven生命周期理解

    你可以仅仅调用clean来清理工作目录,仅仅调用site来生成站点.当然你也可以直接运行 mvn clean install site 运行所有这三套生命周期. 知道了每套生命周期的大概用途和相互关系 ...

  7. dispatch_group_async 使用详解

    dispatch_group_async可以实现监听一组任务是否完成,完成后得到通知执行其他的操作.这个方法很有用,比如你执行三个下载任务,当三个任务都下载完成后你才通知界面说完成的了.下面是一段例子 ...

  8. C# 关键字Event

    1>>> 在委托实例前,不加event,那这个委托就是一个普通的委托,我们可以用别的函数调用,也可以直接用对象调用,但加上关键字之后,只能用成员函数调用 public delegat ...

  9. RAISR: rapid and accurate image super resolution

      准确地说,RAISR并不是用来压缩图像的,而是用来upsample图像的. 众所周知,图片缩小到半分辨率后,在拉回原大小,会出现强烈的锯齿.从80年代开始就有很多super sampling的方法 ...

  10. [转]在ubuntu linux下以编译方式安装LAMP(apache mysql php)环境

    FROM : http://www.cnblogs.com/eleganthqy/archive/2010/02/28/1675217.html 最近转向到了使用ubuntu做桌面,安装好系统以来一直 ...