>炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画<
虽然我是学习java的，但是因为最近使用html5的关系，多学习了一下前端知识。
现在，我要介绍的计时器是十分炫酷的，使用画布完成。
喜欢html5和喜欢炫酷特效的同学可以收藏一下。
-----------------------------------------华丽的分割线----------------------------------------------------
首先，介绍一下文件的效果。
看起来是非常的炫酷的。
-----------------------------------------下面是代码部分，代码注释得很清楚了，就不多废话了----------------------------------------------------
index.html ->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>炫丽的计时器效果-Canvas绘图与动画-</title>
<script src="js/countdown.js"></script>
<script src="js/digit.js"></script>
</head>
<body style="height:100%;width:100%;">
<canvas id="canvas" style="height:100%;width:100%;"></canvas>
</body>
</html>
countdown.js ->
var window_width = 1440;/*页面的宽度*/
var window_height = 900;/*页面的高度*/
var radius = 8;/*小球的半径*/
var margin_top = 60;/*元素的上外边距*/
var margin_left = 30;/*元素的左外边距*/ var curShowTimeSeconds = 0;/*获取当天的秒数*/ var balls = [];/*小球的集合*/
const colors = ["#33b5e5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ffbb33","#ff8800","#ff4444","#cc0000"];/*颜色集合*/ window.onload = function(){
/*判断是否支持canvas,
* 初始化页面*/
window_width = document.body.clientWidth;
window_height = document.body.clientHeight; margin_left = Math.round(window_width/10);
radius = Math.round(window_width*4/5/108)-1; margin_top = Math.round(window_height/5); /*获取canvas对象*/
var canvas = document.getElementById("canvas");
/*判断浏览器是否支持Canvas*/
if(canvas.getContext("2d")){
var context = canvas.getContext("2d");
/*使用context绘制*/
}else{
alert("当前浏览器不支持Canvas，请更换浏览器后再试");
} canvas.width = window_width;
canvas.height = window_height; curShowTimeSeconds = getCurrentShowTimeSeconds();
setInterval(function(){
render(context);
update();
},50);
} function getCurrentShowTimeSeconds(){
/*获取当天的秒数*/
var curTime = new Date();
var ret = curTime.getHours()*3600 + curTime.getMinutes()*60 + curTime.getSeconds(); return ret;
} function update(){
/*负责数据的改变*/ var nextShowTimeSeconds = getCurrentShowTimeSeconds(); var nextHours = parseInt(nextShowTimeSeconds/3600);
var nextMinutes = parseInt((nextShowTimeSeconds-nextHours*3600)/60);
var nextSeconds = nextShowTimeSeconds%60; var curHours = parseInt(curShowTimeSeconds/3600);
var curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60);
var curSeconds = curShowTimeSeconds%60; if(nextSeconds != curSeconds){
if(parseInt(curHours/10) != parseInt(nextHours/10)){
addBalls(margin_left + 0,margin_top,parseInt(curHours/10));
}
if(parseInt(curHours%10) != parseInt(nextHours%10)){
addBalls(margin_left + 15*(radius+1),margin_top,parseInt(curHours%10));
} if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){
addBalls(margin_left + 39*(radius+1),margin_top,parseInt(curMinutes/10));
}
if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){
addBalls(margin_left + 54*(radius+1),margin_top,parseInt(curMinutes%10));
} if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){
addBalls(margin_left + 78*(radius+1),margin_top,parseInt(curSeconds/10));
}
if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){
addBalls(margin_left + 93*(radius+1),margin_top,parseInt(nextSeconds%10));
} curShowTimeSeconds = nextShowTimeSeconds;
} updateBalls();
} function updateBalls(){
/*更新小球*/
for(var i=0;i<balls.length;i++){ balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g; if(balls[i].y >= window_height-radius){
balls[i].y = window_height-radius;
balls[i].vy = -balls[i].vy*0.75;
}
} /*性能优化*/
var count = 0;
for(var i=0;i<balls.length;i++){
if(balls[i].x+radius>0 && balls[i].x - radius < window_width){
balls[count++] = balls[i];
}
}
while(balls.length>Math.min(300,count)){
balls.pop();
}
}
function addBalls(x,y,num){
/*增加数字变化时跳动的小球*/
for(var i=0;i<digit[num].length;i++){
for(var j=0;j<digit[num][i].length;j++){
if(digit[num][i][j]==1){
var aBall = {
x:x+j*2*(radius+1)+(radius+1),
y:y+i*2*(radius+1)+(radius+1),
g:1.5+Math.random(),
vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4, //取-1或者1
vy:-5, //小球向上抛的效果
color:colors[Math.floor(Math.random()*colors.length)]
} balls.push(aBall);
}
}
}
} function render(cxt){
/*负责绘制*/
/*对矩形空间内进行刷新操作*/
cxt.clearRect(0,0,window_width,window_height); var hours = parseInt(curShowTimeSeconds/3600);
var minutes = parseInt((curShowTimeSeconds-hours*3600)/60);
var seconds = curShowTimeSeconds%60; renderDigit(margin_left,margin_top,parseInt(hours/10),cxt);
renderDigit(margin_left + 15*(radius+1),margin_top,parseInt(hours%10),cxt);
renderDigit(margin_left + 30*(radius+1),margin_top,10,cxt);
renderDigit(margin_left + 39*(radius+1),margin_top,parseInt(minutes/10),cxt);
renderDigit(margin_left + 54*(radius+1),margin_top,parseInt(minutes%10),cxt);
renderDigit(margin_left + 69*(radius+1),margin_top,10,cxt);
renderDigit(margin_left + 78*(radius+1),margin_top,parseInt(seconds/10),cxt);
renderDigit(margin_left + 93*(radius+1),margin_top,parseInt(seconds%10),cxt); for(var i=0;i<balls.length;i++){
cxt.fillStyle = balls[i].color; cxt.beginPath();
cxt.arc(balls[i].x,balls[i].y,radius,0,2*Math.PI,true);
cxt.closePath(); cxt.fill();
}
} function renderDigit(x,y,num,cxt){
/*绘制数字,
* 通过一点一点增加变成数字*/
cxt.fillStyle = "rgb(0,102,153)"; for(var i=0;i<digit[num].length;i++){
for(var j=0;j<digit[num][i].length;j++){
if(digit[num][i][j] == 1){
cxt.beginPath();
cxt.arc(x+j*2*(radius+1)+(radius+1),y+i*2*(radius+1)+(radius+1),radius,0,2*Math.PI);
cxt.closePath(); cxt.fill();
}
}
}
}
digit.js ->
/*绘图的坐标*/
digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],/**/
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],/**/
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],/**/
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],/**/
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],/**/
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],/**/
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],/**/
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],/**/
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],/**/
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],/**/
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]/*:*/
];
------------------------------如果大家喜欢，请加关注，谢谢------------------------------------
>炫酷的计时器效果Canvas绘图与动画<的更多相关文章
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习
源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- canvas-炫丽的倒计时效果Canvas绘图与动画基础
canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
- 一个炫酷的Actionbar效果
今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...
- 学习animate.css包含了一组炫酷、有趣、跨浏览器的动画
1.animate.css包含了一组炫酷.有趣.跨浏览器的动画,可以在你的项目中直接使用. 第一步:引入animate.css样式文件或者引入某些平台的CDN文件: <head> < ...
- iOS动画开发之五——炫酷的粒子效果
在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休 ...
- 推荐六款炫酷的HTML5效果插件
1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 ...
- 利用CSS变量实现炫酷的悬浮效果
最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...
随机推荐
- Tornado源码探寻（准备阶段）
上一篇从一个简单的例子大致了解到Tornado框架的一个概述,同时也看清了web框架的本质. 接下来,我们从tornado程序的起始来分析其源码: 一.概述 上图是摘自朋友的博客里的内容,这张图很明确 ...
- Jackson中的那些坑
不符合驼峰规范的变量 “驼峰命名法”请自行百度.简单的来说就是变量的第一个单词以小写字母开始其他单词首字母大写,或者全部单词首字母都大写,分别称为“小驼峰”和“大驼峰” 比如一个符合驼峰规范命名的实体 ...
- hdoj 1002 A + B Problem II【大数加法】
A + B Problem II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- AppiumLibrary实用函数介绍
1. 点击按钮: Click Button index_or_name Click button 实例:Click Button index=0 作者通过实验发现在安卓手机应用测试中,name这个属性 ...
- 2016-5-19模拟测试 bzoj3652 bzoj3653 bzoj3654
T1 description 给定正整数\(n\),定义\(f(x) = \max{y \ \mathrm{xor}\ x}(y<n)\) \(x\)在\([0,n)\)随机取值,求\(f(x) ...
- String与常量池
转自:http://blog.sina.com.cn/s/blog_69dcd5ed0101171h.html 1. 首先String不属于8种基本数据类型,String是一个对象.因为对象的默认值是 ...
- JSP版（utf8编码）的Ueditor百度文章编辑器配置以及使用说明
二话不说,先上图: 我配置好的效果大致是这些功能:基本的文字编辑功能.图片上传功能.附件上传功能.百度/谷歌地图搜索截图.视/音频发布功能.这个插件是现今我用过觉得最舒服的编辑器,功能齐全强大,稍微修 ...
- 用高德地图API 通过详细地址获得经纬度
http://cloud.sinyway.com/Service/amap.html http://restapi.amap.com/v3/geocode/geo?key=xxxxxxxxxxxxxx ...
- [CSS] Targeting Elements with CSS Attribute Selectors
Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In t ...
- 自主创建tcpdump/wireshark pcap文件
pcap文件格式是bpf保存原始数据包的格式,很多软件都在使用,比如tcpdump.wireshark等等,了解pcap格式可以加深对原始数据包的了解,自己也可以手工构造任意的数据包进行测试. p ...