炫酷的时钟--canvas初体验
先啥也不说：来张效果图
我是根据：http://www.imooc.com/learn/133 这里的课程进行学习的。大大的感谢liuyubobobo老师的深入浅出的讲解！！
我在这里仅仅提供我自己的代码和整体思路。
我的思路：
1 我们需要创建一个名为Ball的构造函数，每一个小球都是该构造函数的实例。
每个小球都有以下属性：
x坐标，y坐标(本例中，以画布的左上角为原点)，颜色，半径，x方向的速度，y方向的速度，y方向的重力加速度
方法：
更新自身属性。(就是根据自己的速度 加速度 判断出下一时刻自身的位置参数以及速度，并改变自身属性)
2 我们需要构造一个函数，这个函数能将根据小球的属性将小球在画布上表现出来；
3 我们需要构造一个定时器，每隔50ms(当然也不用非得是50ms)将画布上的当前小球清空，并重新生成小球并表现出来
通过观察效果图，我们可以看到，效果图中的小球可以分为两类：
第一类是表示(组成)时间的小球，这类小球生命周期只有定时器的运行间隔时间那么长。
第二类是处于掉落状态的小球，这类小球的生命周期比第一类要长，当这类小球滚出了画布，他的生命周记就结束了。
第二类小球需要储存在一个单独的数组中，我们需要一个函数，这个函数能判断小球是否离开了画布，并将离开画布的小球对象从数组中删除
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]
]//:
];
digit.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type='text/javascript'src="digit.js"></script>
<style>
body{
margin: 0;
padding: 0;
}
canvas{
display: block;
margin: 10px auto;
border: 1px solid blanchedalmond;
}
</style>
</head>
<body>
<canvas id="canvas" width="1200" height="650"></canvas>
<script type="text/javascript" src="digit.js"></script>
<script>
var WINDOW_WIDTH = 1200;
var WINDOW_HEIGHT = 650;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 80;
var FLASHTIME = 50;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var curTimeList = 0;
var nextTimeList = 0;
// 掉落小球对象数组
var fallBallsList = [];
window.onload = function(){
var timer = setInterval(function(){
render(context,MARGIN_LEFT,MARGIN_TOP,FLASHTIME);
updateFallBalls(RADIUS);
console.log(fallBallsList.length)
},FLASHTIME) }; function Ball(){
//定义小球对象
Ball.prototype.x = 0; // 小球x坐标
Ball.prototype.y = 0; // 小球y坐标
Ball.prototype.r = 8; // 小球半径
Ball.prototype.color = 'blue'; // 小球颜色
Ball.prototype.vx = 0; // 小球x方向的速度
Ball.prototype.vy = 0; // 小球y方向的速度
Ball.prototype.g = 0; // 小球的y方向的加速度
Ball.prototype.update = function(){ // 更新小球坐标以及小球的y方向的速度
this.x += this.vx;
this.y += this.vy;
this.vy += this.g;
}
} function render(context,x0,y0,flashtime){
/* 本函数的作用:在画布上渲染小球
* context: 画布对象
* x0: 整个时间相对于画布左边缘的偏移
* y0: 整个时间相对于画布上边缘的偏移
* flashtime: 刷新时间
*/
// 清空画布
context.clearRect(0,0,1200,650);
// 获取当前时间。并格式化。 如果是12:34:56 则输出[1,2,10,3,4,10,5,6]
curTimeList = getDigitNumList(getTimeStr());
// 获取下一次定时器运行时刻的时间，并格式化
nextTimeList = getDigitNumList(getTimeStr(FLASHTIME));
// 获取所有的小球对象的数组，包含表示时间的小球以及掉落小球。格式：[ball1,ball2,……,balln]
var allballsList = getBallsList(digit,x0,y0);
// 所有的小球对象数组，包含了表示时间的小球对象以及掉落小球对象 for (var i in allballsList){
context.beginPath();
context.arc(allballsList[i].x,allballsList[i].y,allballsList[i].r,0,2*Math.PI);
context.closePath();
context.fillStyle = allballsList[i].color;
context.fill();
allballsList[i].update() } } function updateFallBalls(r){
// 更新掉落小球对象数组，也就是使那些掉落到画布下边缘的小球能反弹上去 并 使离开画布的小球对象从数组中被删除，
for(var n in fallBallsList){
if(fallBallsList[n].y >= WINDOW_HEIGHT -r){
fallBallsList[n].y = WINDOW_HEIGHT - r;
fallBallsList[n].vy = fallBallsList[n].vy * -0.8
}
} var cnt = 0;
for (var i in fallBallsList){
if (fallBallsList[i].x + r > 0 && fallBallsList[i].x - r < WINDOW_WIDTH){
fallBallsList[cnt++] = fallBallsList[i];
}
}
fallBallsList.splice(cnt-1); } function getBallsList(digit,x0,y0){
// 本函数的作用： 返回所有小球对象组成的数组
if(curTimeList != nextTimeList){
for (var n in nextTimeList){
if(nextTimeList[n] != curTimeList[n]){
// 更新掉落小球对象组成的数组
fallBallsList = fallBallsList.concat(_GetOneDigitBallsList(digit[curTimeList[n]],n,x0,y0,RADIUS,true)); }
}
}
var ballsList = [];
// 生成表示时间的小球对象组成的数组
for(var i in curTimeList){
ballsList = ballsList.concat(_GetOneDigitBallsList(digit[curTimeList[i]],i,x0,y0,RADIUS));
} return ballsList.concat(fallBallsList)
} function _GetOneDigitBallsList(list,position,leftOffset,topOffset,r,choice){
/* 本函数的作用是：获取组成一个数字的小球对象数组。
* list: 数组digit的某一项
* position： 该数字在时间中的位置
* r: 小球的半径
* choice：若为true，则随机小球对象的颜色，速度以及加速度，也就是说，若为true生成的小球对象为掉落小球
* 当时间是21:43:65秒时，如果我们想要得到组成数字3的小球列表,
* 应该这样调用本函数：_GetOneDigitBallsList(digit[3],4,左偏移,右偏移,r)
*
*/
var ballsList = [];
var x0 = 0;
var y0 = 0;
for(var i in list){
y0 = topOffset + i*2*(r+1)+r+1;
for (var j in list[i]){
if(list[i][j] == 1){
if(position < 3){
x0 = leftOffset + position * 14 * (r+1)+ (r+1) *position + r+1 +j * 18
}else if(position < 6){
x0 = leftOffset + (position -1) *14*(r+1)+(r+1)*position + 8* (r+1) +r +1 +j * 18
}else {
x0 = leftOffset + (position-2)*14*(r+1)+ (r+1)*position + 16*(r+1) + r +1 +j * 18
}
ballsList.push(getOneBall(x0,y0,r,choice))
}
}
}
return ballsList
} function getOneBall(x,y,r,random){
/*
* 返回一个小球对象
* x: 小球圆心的x坐标
* y: 小球圆心的y坐标
* r: 小球的半径
* random: 是否随机小球的速度，颜色以及加速度
*/
var ball = new Ball();
ball.x = x;
ball.y = y;
ball.r = r;
if(random){
ball.color = randomColor();
ball.vx = randomV();
ball.vy = randomV();
ball.g = 1.5 + Math.random();
} return ball
} function getDigitNumList(timeStr){
/* 返回当前时间字符所对应的digit项数组
* 字符0-9分别对应着 digit 数组中的0-9索引项，而字符 ‘:’ 则对应着digit[10]
*/
var digitList = [];
for (var i in timeStr){
if (timeStr[i] == ':'){
var num = 10;
}else{
var num = parseInt(timeStr[i]);
}
digitList.push(num);
}
return digitList;
} function getTimeStr(offset){
var time = new Date();
if(offset){
time = new Date(time.getTime()+offset)
}
var hours = time.getHours()>9?time.getHours():'0'+time.getHours();
var mins = time.getMinutes()>9?time.getMinutes():'0'+time.getMinutes();
var seconds = time.getSeconds()>9?time.getSeconds():'0'+time.getSeconds();
return hours + ':' + mins +':' + seconds;
} function randomColor(){
var colorList = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"];
return colorList[Math.floor(Math.random()*colorList.length)]
} function randomV(){
return Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4
} </script>
</body>
</html>
炫酷的时钟--canvas初体验的更多相关文章
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- 基于skitter的轮播图炫酷效果，幻灯片的体验
概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...
- canvas，制作炫酷的时钟和倒计时
html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin ...
- canvas初体验之基本线条
有的时候我们打开一些网站,可以看到背景是闪烁的星空或者是有一些可以与鼠标交互的线条等等,此酷炫的效果就是用到了html5的canvas效果. 首先来认识一下h5新增的标签的写法<canvas&g ...
- canvas初体验之加载图片
上一篇的介绍主要是画一些基本的图案,这一篇主要是加载图案. canvas加载图片主要分为两个步骤: 1.获取图片资源. 2.将图片资源画到画布上. 1.1获取图片资源,canvasAPI为我们提供了多 ...
- canvas初体验
利用画布,绘制随机大小,颜色,位置 方框<!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- canvas炫酷时钟
canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...
- >炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
- 教你做炫酷的碎片式图片切换 (canvas)
前言 老规矩,先上 DEMO 和 源码.图片区域是可以点击的,动画会从点击的位置开始发生. 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动.最近 ...
随机推荐
- C++ 基本知識回顧
---------------------------------------------------------------------------------------------------- ...
- 《深入浅出Node.js》第4章 异步编程
@by Ruth92(转载请注明出处) 第4章 异步编程 Node 能够迅速成功并流行起来的原因: V8 和 异步 I/O 在性能上带来的提升: 前后端 JavaScript 编程风格一致 一.函数式 ...
- 编写更好的jQuery代码的建议（share）
留个备份! 原文链接: Mathew Carella 翻译: 伯乐在线- yanhaijing译文链接: http://blog.jobbole.com/52770/ 讨论jQuery和javas ...
- Error:Execution failed for task ':app:transformClassesWithInstantRunForDebug'. > java.lang.ClassNotFoundException: io.realm.RealmObject
这问题错误是在运行时出现的,A-Jiang大神有说明解决方法,大神网址:https://github.com/AndroidJiang/StockChart 如果是as2.0+,可能会出现instan ...
- liunx之：top命令解释
top命令经常用来监控linux的系统状况,比如cpu.内存的使用,程序员基本都知道这个命令,但比较奇怪的是能用好它的人却很少,例如top监控视图中内存数值的含义就有不少的曲解. 本文通过一个运行中的 ...
- （转）WHY DEEP LEARNING IS SUDDENLY CHANGING YOUR LIFE
Main Menu Fortune.com E-mail Tweet Facebook Linkedin Share icons By Roger Parloff Illustration ...
- 各种Linux发行版本优缺点对比[转]
转自:http://www.zzbeidaqingniao.com/linux/20100127/1495.html linux最早由Linus Benedict Torvalds在1991年开始编写 ...
- 利用freemarker 静态化网页
1.介绍-FreeMarker是什么 模板引擎:一种基于模板的.用来生成输出文本的通用工具 基于Java的开发包和类库 2.介绍-FreeMarker能做什么 MVC框架中的View层组件 Html页 ...
- Spring MVC入门实战（一）
本文主要把一个菜鸟从“只是听说过Spring MVC”到“可以手动创建并运行一个Spring MVC工程”的过程记录下来,供以后复习. 0. 开发环境准备 计算机平台:Windows 7 X64. 需 ...
- SpringMVC学习系列（6） 之 数据验证
在系列(4).(5)中我们展示了如何绑定数据,绑定完数据之后如何确保我们得到的数据的正确性?这就是我们本篇要说的内容 —> 数据验证. 这里我们采用Hibernate-validator来进行验 ...