>炫酷的计时器效果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网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...
随机推荐
- hdoj 5494 Card Game
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5494 题意:首先一个数t代表测试样例组数 然后两个数n,m 代表数列中有n个数 从中取m个数 ...
- iOS中SQLite知识点总结1
数据库(SQLite) 01-数据库简介 1.什么是数据库 数据库(Database)是按照数据结构来组织,存储和管理数据的仓库 2.数据库的分类 关系型数据库(主流) PC端:Oracle/MySQ ...
- LabSharp莱博夏普简介
莱博夏普提供实验室信息化解决方案,为实验室提供LIMS系统建设方案咨询,并为中小型LIMS系统供应商提供系统解决方案咨询.
- c#判断输入textbox是否为数字
asp.net判断输入文字是否是数字 方案一:/**//// <summary> /// 名称:IsNumberic /// 功能:判断输入的是否是数字 /// 参数:string oTe ...
- MyEclipse10搭建Strust2开发环境
一.创建一个JavaWeb项目 启动MyEclipse10 ,然后在MyEclipse中创建一个JavaWeb项目,点击[File]---->[New]---->[WebProjec ...
- mongodb 学习笔记 09 -- shard分片
概述 shard 分片 就是 把不同的数据分在不同的server 模型 当中: 用户对mongodb的操作都是向mongs请求的 configsvr 用于保存,某条数据保存在哪个sha ...
- JAVA 上加密算法的实现用例---转载
通常 , 使用的加密算法 比较简便高效 , 密钥简短,加解密速度快,破译极其困难.本文介绍了 MD5/SHA1,DSA,DESede/DES,Diffie-Hellman 的使用. 第 1 章基础知识 ...
- hdu2044java
一只小蜜蜂... Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- NDK开发之ndk-build命令详解
毫无疑问,通过执行ndk-build脚本启动android ndk构建系统. 默认情况下,ndk-build脚本在工程的主目录中执行,如: 我们可以用使用-C参数改变上述行为,-C指定工程的目录,这样 ...
- Linux下搭建Oracle11g RAC(4)----配置oracle,grid用户SSH对等性
虽然在安装软件的过程中,oracle会自动配置SSH对等性,建议在安装软件之前手工配置. 配置oracle用户对等性: node1: [root@node1 ~]# su - oracle node1 ...