动态效果请点此下载文件并使用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. Jquery中使用定时器setInterval和setTimeout

    直接在ready中调用其他方法,会提示缺少对象的错误,解决方法如下: 方法1. 函数不在$(function(){....})内,setInterval第一个参数为"showAtuto&qu ...

  2. TCP握手与socket通信细节

    http://www.jianshu.com/u/5qrPPM http://www.jianshu.com/p/f86512230707

  3. 在简历中使用STAR法则

    一.什么是STAR法则? The STAR (Situation, Task, Action, Result) format is a job interview technique used by ...

  4. Delphi处理Android的路径信息

    路径操作就使用TPath的方法都很方便.usesSystem.IoUtilsTPath.GetTempPath//临时目录TPath.GetCameraPath//照相机目录(照片/录像)TPath. ...

  5. 关于iosApp审核问题

    求各位大神指导!!!!我上周app打包上传给APPstore准备发布,可是苹果官方发来邮件,说我引用了非公有选择,原文如下: Non-public API usage: The app referen ...

  6. 检查radio/checkbox是否至少选择一项

    //---------------------------------------------------------- // 功能:检查radio/checkbox是否至少选择一项 // 参数: / ...

  7. Spring Mvc如何通过注解的方式设置视图解析器的优先级

    <bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalRes ...

  8. 数据更新后让ListView自动滚动到底部

    在做聊天界面的时候想要发送新的数据后,listview自动滚动到底部,显示出最新的数据.网上找了两个方法,觉得不错,记录一下. 方法一: 给listview添加下面两个属性 android:stack ...

  9. SimpleAdapter和AutoCompleteTextView配合使用

     修改后成为这样→    package com.kale.autocompletetextview; import java.util.ArrayList; import java.util.Has ...

  10. REQUEST_TIMEOUT 解决方案

    you need to pass an npmrc file when you install the business network onto the peers. For more info s ...