【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习
源自慕课网
效果如下：
全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<style type="text/css">
html,body{height:100%}
</style>
<body>
<canvas id="canvas" style="height:100%">
当前浏览器不支持Canvas
</canvas>
</body>
</html>
<script type="text/javascript" src="digit.js"></script>
<script type="text/javascript" src="clockdown.js"></script>
逻辑代码：clockdown.js
var WINDOW_WIDTH=1024;
var WINDOW_HEIGHT=600;
var MARGIN_TOP=60;
var MARGIN_LEFT=30;
//存放彩色小球
var balls=[]; const colors=["#33B5E5","#0099CC","#AA66CC","#669900","#FFBB33","#FF8800","#FF4444","CC0000"];
var r=8;//圆半径
window.onload=function(){
WINDOW_WIDTH=document.body.clientWidth;
WINDOW_HEIGHT=document.body.clientHeight;
MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
r=Math.round(WINDOW_WIDTH*4/5/108)-1;
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT; window.setInterval(function(){
var curr=new Date();
var curHours=curr.getHours();
var curMinutes=curr.getMinutes();
var curSeconds=curr.getSeconds(); //当时间的秒数改变时添加彩色小球
if(preSeconds!=curSeconds)
{ if(parseInt(curHours/10)!=parseInt(preHours/10)){
addBall(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));
}
if(parseInt(curHours%10)!=parseInt(preHours%10)){
addBall(MARGIN_LEFT+15*(r+1),MARGIN_TOP,parseInt(curHours%10));
}
if(parseInt(curMinutes/10)!=parseInt(preMinutes/10)){
addBall(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(curMinutes/10));
}
if(parseInt(curMinutes%10)!=parseInt(preMinutes%10)){
addBall(MARGIN_LEFT+54*(r+1),MARGIN_TOP,parseInt(curMinutes%10));
} if(parseInt(curSeconds/10)!=parseInt(preSeconds/10)){
addBall(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(curSeconds/10));
}
if(parseInt(curSeconds%10)!=parseInt(preSeconds%10)){
addBall(MARGIN_LEFT+93*(r+1),MARGIN_TOP,parseInt(curSeconds%10));
}
}
render(context); },50); } //添加小球(数字num上的彩色小球，x，y:数字方块容器的左上角顶点坐标)
function addBall(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 ball={
x:x+j*2*(r+1)+r+1,
y:y+i*2*(r+1)+r+1,
g:1.5+Math.random(),
vx:Math.pow(-1,Math.ceil(Math.random()*1000))*9,//结果为-10/10
vy:-10,
color:colors[Math.floor(Math.random()*colors.length)]
};
balls.push(ball); }
}
}
}
//----画彩色小球
function renderBalls(context){
//context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
for (var i=0;i<balls.length ;i++ )
{
context.beginPath();
context.arc(balls[i].x,balls[i].y,r,0,2*Math.PI,false);
context.fillStyle=balls[i].color;
context.fill();
context.closePath();
}
} //----更新彩色小球位置
function UpdateBalls(){
var count=0;
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+r>=WINDOW_HEIGHT){
balls[i].y=WINDOW_HEIGHT-r;
balls[i].vy=-balls[i].vy*0.7;
} if(balls[i].x+r>0&&balls[i].x-r<WINDOW_WIDTH){
balls[count++]=balls[i];} }
//移除溢出的小球
while(balls.length>count){balls.pop();}
} var preHours;
var preMinutes;
var preSeconds; //渲染整个画布
function render(context)
{
context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
var now=new Date();
var hours=now.getHours();
var minutes=now.getMinutes();
var seconds=now.getSeconds();
preHours=hours;
preMinutes=minutes;
preSeconds=seconds;
//---时
renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),context);
renderDigit(MARGIN_LEFT+15*(r+1),MARGIN_TOP,hours%10,context);
renderDigit(MARGIN_LEFT+30*(r+1),MARGIN_TOP,10,context);
//---分
renderDigit(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(minutes/10),context);
renderDigit(MARGIN_LEFT+54*(r+1),MARGIN_TOP,minutes%10,context);
renderDigit(MARGIN_LEFT+69*(r+1),MARGIN_TOP,10,context);
//---秒
renderDigit(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(seconds/10),context);
renderDigit(MARGIN_LEFT+93*(r+1),MARGIN_TOP,seconds%10,context);
//---画小球
renderBalls(context);
//---改变小球路径
UpdateBalls(); console.log(balls.length); }
//渲染每个数字
function renderDigit(x,y,num,context)
{
context.fillStyle="green";
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){
context.beginPath();
context.arc(x+j*2*(r+1)+r+1,y+i*2*(r+1)+r+1,r,0,2*Math.PI,false);
context.closePath();
context.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,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]
],//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]
],//2
[
[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]
],//3
[
[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]
],//4
[
[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]
],//5
[
[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]
],//6
[
[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]
],//7
[
[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]
],//8
[
[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]
],//9
[
[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]
]//:
];
【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习的更多相关文章
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- canvas-炫丽的倒计时效果Canvas绘图与动画基础
canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...
- >炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
- 学习Canvas绘图与动画基础 制作弧和圆（五）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 绘制多条路径（四）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 为多边形着色（三）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 绘制直线（二）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 学习Canvas绘图与动画基础 canvas入门（一）
一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta char ...
- HTML5中video标签与canvas绘图的使用
video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...
随机推荐
- Android中各组件的生命周期
1.Activity生命周期图 二.activity三种状态 (1)active:当Activity运行在屏幕前台(处于当前任务活动栈的最上面),此时它获取了焦点能响应用户的操作,属于活动状态,同一个 ...
- 可视化日志分析工具Gltail的安装与使用
可视化日志分析工具Gltail的安装与使用 GlTail.rb 是一款带有浓郁的 Geek 风格的可视化日志分析工具,它采用 Ruby 技术构建,并利用 OpenGL 图形技术进行渲染,呈现 ...
- 关于Java中形参与实参的理解
今天阅读了一个写的非常棒的博文,通过此博文再次复习了Java中参数传递的知识(即值传递与引用传递的区别).参考网站http://www.cnblogs.com/binyue/p/3862276.htm ...
- Java中函数的重载
函数的重载 1.同一个类 2.同名函数 3.参数个数不同或者参数类型不同 4.java是严谨性语言,如果函数出现的调用的不确定性,会编译失败. public static int add(int a, ...
- gulp.spritesmith修改px为rem单位
移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background ...
- Linux命令之type
1:linux命令可以分为很多类,其中常见得类型: (1):builtin --内置命令 (2):alias --命令别名 (3):file --外部命令 具体有哪些内置命令以及内置命令各个用法: [ ...
- 深入浅出Nodejs读书笔记(转)
Node简介 这一章简要介绍了Node,从中可以了解Node的发展历程及其带来的影响和价值. 为什么叫Node?起初,Ryan Dahl称他的项目为web.js,就是一个Web服务器,但是项目的发展超 ...
- [视频]ARM告诉你物联网怎么玩,mbed 6LoWPan demo
该视频演示了基于arm mbed的物联网设备间的6LoWPAN应用,如连接家里的土壤湿度传感器,灯光控制,安防联动等应用. 演示视频 原创文章,转载请注明: 转载自 http://www. ...
- ububtu 14.04 问题集合
作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4168168.html 1.Chromium 中的flash插件问题: sudo apt-ge ...
- 浅谈JavaScript中的string拥有方法的原因
我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null ...