[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>

转载于:https://www.cnblogs.com/xiandedanteng/p/10466895.html

[Canvas]越来越近的女孩相关推荐

VS Code 1.39 发布！Web 版 VS Code 是否离我们越来越近了？（文末彩蛋）
今天(北京时间 2019 年 10 月 10 日),微软发布了 Visual Studio Code 1.39 版本.此版本主要更新的内容包括: Source Control tree view - ...
linux rc4,Linux kernel 4.8-rc4发布下载，正式版越来越近
距离第三个候选版发布一周时间,Linus Torvalds于今天宣布了Linux Kernel 4.8-rc4,喜欢尝鲜的用户可以下载体验了. Linus Torvalds在邮件中称,Linux ke ...
梦想照进现实的百度Apollo，越来越近的无人驾驶时代
文|魏启扬来源|智能相对论(aixdlun) 无人驾驶时代的脚步越来越近了. 9月15日,"万物智联-百度世界2020"大会上,央视新闻主播宝晓峰与百度集团副总裁.智能驾驶事业群 ...
可自我组装、修复的机器人或梦想成真！变形金刚“汽车人”离我们越来越近？...
热点追踪 / 深度探讨 / 实地探访 / 商务合作还记得<变形金刚3>上映时,当汽车人在高速行进中变形,并与霸天虎展开激烈的战斗时,小探内心的激动难以掩盖.有朝一日,在现实生活中,我们是 ...
硬件钱包亮相、支付宝低调内测，数字人民币离普及应用越来越近了
随着全国多地相继开展数字人民币试点工作,数字人民币正在"飞入寻常百姓家",测试的场景范围也变得越来越丰富,不断地渗入我们的日常生活中. 无需借助手机的硬件钱包数字人民币拥有软件钱 ...
全民直播答题，让你离智障越来越近
硅谷Live / 实地探访 / 热点探秘 / 深度探讨 "这都2018年了你还玩'王者'?瞧你那点出息,成天打打杀杀的!我跟你说,最近那啥在线答题可火了,答题闯关,答对了还能分钱! &quo ...
2008年9月11号，星期四，晴。今天是我博士生涯的第67天，离中秋越来越近了，昨天和太太通电话，得知九江下了很大的雨
2008年9月11号,星期四,晴. 今天是我博士生涯的第67天,离中秋越来越近了,昨天和太太通电话,得知九江下了很大的雨,我说呢,白天还是很热的武汉,晚上的时候凉风习习,可能秋天的脚步是越来越近了 ...
专转本计算机一个月零基础,距离2019年专转本考试越来越近，可我还是零基础怎么办？...
原标题:距离2019年专转本考试越来越近,可我还是零基础怎么办? 5月初就已经正式立夏接着挺过了两天阴雨,天气又渐渐热起来了时间眨眼间消失,2018年竟然只剩下一半的时光转本的事情拖了一年,又拖 ...
17 个品牌，113 款 5G 手机，5G 离我们越来越近
作者 | 小F 来源 | 法纳斯特(ID:walker398) 头图 | CSDN 下载自东方IC 前几天iPhone12发布,苹果也终于推出它的首款5G手机. 最低价位5499元,贫穷的小F果断选 ...

[Canvas]越来越近的女孩

[Canvas]越来越近的女孩相关推荐

最新文章

热门文章