>炫酷的计时器效果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网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...
随机推荐
- SQL查询记录添加序号(HANA)
语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) row_number() OVER() 从1开始,为每一条分组记录返回一个数字,这里 ...
- sql server 分组统计数据
说明:group by是sql中对数据表中的数据进行分组的,在select列表中出现的字段必须全部出现在group by 字段中,出现在聚合函数中的字段在group by中可有可无,没有出现在sele ...
- 后台进程弹Toast的几种方案
在后台进程弹Toast,使用方案有:由UI线程传入一个Activity參数.View參数或者Handler參数,使用Activity.runOnUiThread(Runnable).View.post ...
- MVC-@html.ActionLink的几种参数格式
一 Html.ActionLink("linkText","actionName") 该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法, ...
- Excel异常Cannot get a text value from a numeric cell
POI操作Excel时数据Cell有不同的类型,当我们试图从一个数字类型的Cell读取出一个字符串并写入数据库时,就会出现Cannot get a text value from a numeric ...
- [MySQL 5.6] 初识5.6的optimizer trace
在MySQL5.6中,支持将执行的SQL的查询计划树记录下来,目前来看,即使对于非常简单的查询,也会打印出冗长的查询计划,看起来似乎不是很可读,不过对于一个经验丰富,对查询计划的生成过程比较了解的 ...
- 2014-08-05 pig
Pig的数据类型能够分为两种:一种是scalar类型,包含单一的value,一种是complex类型,包含有其他的类型. 对于scalar类型: int,long,float,double,chara ...
- Performing a thread dump in Linux or Windows--reference
Linux/Unix 1. Find the Java/Tomcat process id. % ps ax | grep java You should see output like this 1 ...
- linux sed使用
原文引用:http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2856901.html [root@www ~]# sed [-nefr] [动作] ...
- 后缀自动机（SAM）
*在学习后缀自动机之前需要熟练掌握WA自动机.RE自动机与TLE自动机* 什么是后缀自动机 后缀自动机 Suffix Automaton (SAM) 是一个用 O(n) 的复杂度构造,能够接受一个字符 ...