[Canvas]越来越近的女孩
本作比前作增加了控制功能,观看动态效果请点此下载代码用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]越来越近的女孩的更多相关文章
- 【Canvas真好玩】从黑客帝国开始
前言 笔者之前有一段时间一直在学习Canvas相关的技术知识点,通过参考网上的一些资料文章,学着利用简单的数学和物理知识点实现了一些比较有趣的动画效果,最近刚好翻看到以前的代码,所以这次将这些代码实践 ...
- canvas学习之API整理笔记(二)
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- View优化
前面写了个View画圆弧,为了让他和底层图片效果融合,采用先把圆弧画到和图片一样大小的画布上,然后用canvas的变换位图方法映射过去. bitmapWithReflection = Bitmap.c ...
- HT for Web列表和3D拓扑组件的拖拽应用
很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表中拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果. 首先 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- 《Braid》碎片式台词
谁见到过风? 你没有,我也没有. 但当树儿低下头, 便是风儿经过时. 便是风儿穿过的时候. 但当树叶微微摇首, 你没有,我也没有. 谁见到过风? 二.时间与宽恕 1.提姆要出发了!他要去寻找并救出公主 ...
- 难得一见的HTML5动画欣赏及源码下载
今天要给大家分享一些很酷的HTML5动画演示,并且提供源代码的下载.大部分HTML5动画都是通过canvas实现,当然也有基于SVG的,尤其是第一个,看起来很简单,但是创意却不错. 1.HTML5梦幻 ...
- 时间序列分析算法【R详解】
简介 在商业应用中,时间是最重要的因素,能够提升成功率.然而绝大多数公司很难跟上时间的脚步.但是随着技术的发展,出现了很多有效的方法,能够让我们预测未来.不要担心,本文并不会讨论时间机器,讨论的都是很 ...
- 深入浅出Android开发之Surface介绍
一 目的 本节的目的就是为了讲清楚Android中的Surface系统,大家耳熟能详的SurfaceFlinger到底是个什么东西,它的工作流程又是怎样的.当然,鉴于SurfaceFlinger的复杂 ...
随机推荐
- USBDM Kinetis Debugger and Programmer
Introduction The FRM-xxxx boards from Freescale includes a minimal SWD based debugging interface for ...
- 【Go命令教程】11. go vet 与 go tool vet
命令 go vet 是一个 用于检查 Go 语言源码中静态错误的简单工具.与大多数 Go 命令一样,go vet 命令可以接受 -n 标记和 -x 标记.-n 标记用于只打印流程中执行的命令而不真正执 ...
- Plan Explorer数据库
Plan Explorer数据库 https://www.sentryone.com/platform/sql-server-performance-monitoring
- 改变窗体大小视图区图形也会跟着变化 MFC
怎样实现窗体缩放,视图区里的图形也会跟着变化 在CMFCView类中加入三个消息函数: 在类向导中选中CMFCView类,点击右键---->类向导------>消息--------> ...
- MySQL 5.6主从Slave_IO_Running:Connecting/error connecting to master *- retry
刚配置的MySQL主从,在从机上看到 点击(此处)折叠或打开 mysql> SHOW slave STATUS \\G *************************** 1. row ** ...
- C++ inline内联函数
inline 函数避免函数调用的开销 // find longer of two strings const string &shorterString(const string &s ...
- 分析iOS Crash文件,使用命令符号化iOS Crash文件
TBMainClient.ipa改名为TBMainClient.zip并解压得到TBMainClient.app 然后将TBMainClient.app TBMainClient.app.d ...
- JQuery攻略(二) Jquery手册
在上一篇 JQuery攻略(一) 基础知识——选择器 与 DOM 中,我写了js的使用,如何选择元素,和一些比较常用的函数及DOM操作. 在这篇中,我将建立多个列表,将更多的 自定义选择器,函数,DO ...
- 监听home键+模拟home键
一.监听home键首先定义一个广播接受者 HomeKeyReceiver package com.kale.floattest; import com.kale.floattest.service.D ...
- Leetcode刷题记录:编码并解码短网址
题目要求 编写一个类,提供两个方法.一个可以将普通的网址编码成短网址,一个可以将短网址还原为普通网址. 参考题解 # 使用随机函数,生成短网址,保存在dict中,避免重复 import random ...