>炫酷的计时器效果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网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...
随机推荐
- android4.0 FaceDetection笔记
这几天研究了下andoid4.0.3的FaceDetection这里写一下大致的流程,方便日后查阅. 相关说明可以在这里找到: frameworks/base/docs/html/guide/topi ...
- Intellij 中的git操作 转！
http://blog.csdn.net/lovesummerforever/article/details/50032937 Git原理以后会分章节介绍,本次主要说一下intellij怎样操作git ...
- EXCEL 2010学习笔记—— 动态图表
今天梳理一下动态图表的相关内容,做一个简单的整理 关键的操作点: 1.插入动态控制器:开发工具->插入->表单控件 对控件进行修改 右键 设置控件格式->单元格链接 用来作为if ...
- 获取自身ip
curl http://members.3322.org/dyndns/getip curl一下这个网址即可 Linux 终端中可以直接这样使用
- 20169210《Linux内核原理与分析》第十二周作业
Return-to-libc 攻击实验 缓冲区溢出的常用攻击方法是用 shellcode 的地址来覆盖漏洞程序的返回地址,使得漏洞程序去执行存放在栈中 shellcode.为了阻止这种类型的攻击,一些 ...
- 20169210《Linux内核原理与分析》第六周作业
这次博客分为两部分,第一部分是实验,第二部分是教材. 第一部分:实验 这周实验的内容是使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用,教学案例给的是time()获取系统时间的函数,我 ...
- MVC传递Model之TempData、ViewData、ViewBag差别及用途
MVC使用过程中常常会用到TempData.ViewData.ViewBag三种方式,这三种什么差别呢? TempData:默认存储于Session中,可通过继承ITempDataProvider接口 ...
- 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上
1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...
- SQL高级优化之经常使用的优化策略-2（The Return Of The King）
1.2 索引 索引不是越多越好,你须要知道索引建立多了.写入数据的效率会减少.怎样使用索引要看你的项目的应用场景,做出合理的測试评估. 1.2.1 统计数量 统计数量上.假设字段(fieldName) ...
- GO的跨平台数扰类型
基本数据类型的包装: 1.跨平台,用于移植 2.不同的框架类型包装的类型(MFC ,WIN32SDK,C) 3.基本数据类型的组装成的结构体 4.宏定义 数字类型 Go 也有基于架构的类型,例如:in ...