canvas基础绘制-绚丽倒计时
效果图：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ball</title>
<script src="digit_1.js"></script>
<script src="countdown.js"></script>
</head>
<body style="height: 100%;">
<canvas id="canvas" style="height: 100%"></canvas>
</body>
</html>
digit_1.js在之前的 canvas基础绘制-倒计时 中有贴
countdown.js:
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30; var endTime = new Date();//const声明变量，不可修改，必须声明时赋值；
endTime.setTime( endTime.getTime() + 3600*1000);//当前时间向后一小时；
var curShowTimeSeconds = 0; var balls =[];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; window.onload = function () {
//屏幕自适应
WINDOW_WIDTH = document.body.clientWidth;
WINDOW_HEIGHT = document.body.clientHeight; RADIUS = Math.round(WINDOW_WIDTH*4/5/108)-1; MARGIN_TOP = Math.round(WINDOW_HEIGHT/5);
MARGIN_LEFT = Math.round(WINDOW_WIDTH/10); var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT; curShowTimeSeconds = getCurrentShowTimeSeconds();
setInterval(
function () {
update();
render(context);
},50) }; function getCurrentShowTimeSeconds() {
var curTime = new Date();//获取目前时间；
var ret = endTime.getTime()-curTime.getTime();
ret = Math.round(ret/1000);//获取秒数差值；
return ret>=0?ret:0;
}
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(curSeconds%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){
balls[i].y = WINDOW_HEIGHT-RADIUS;
balls[i].vy = -balls[i].vy*0.75;
}
}
// 如果小球出了画布，就清除小球,性能优化
var cnt = 0;
for(var i=0;i<balls.length;i++){
if(balls[i].x-RADIUS>0&&balls[i].x+RADIUS<WINDOW_WIDTH){
balls[cnt++] = balls[i];
}
}
while (balls.length>Math.min(300,cnt)){
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,//pow(x,y),x 的 y 次幂;ceil()可对一个数进行上舍入;
vy: -5,
color: colors[Math.floor(Math.random() * colors.length)]//floor()对一个数进行下舍入
};
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();
}
}
}
}
canvas基础绘制-绚丽倒计时的更多相关文章
- canvas基础绘制-绚丽时钟
效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTim ...
- canvas基础绘制-倒计时(下)
digit_1.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 ...
- canvas基础绘制-倒计时(上)
效果: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- canvas基础绘制-arc
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas基础绘制-一个小球的坠落、反弹
效果如图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^
对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...
- canvas API ，通俗的canvas基础知识（一）
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
- canvas快速绘制圆形、三角形、矩形、多边形
想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
随机推荐
- HDU3085 Nightmare Ⅱ —— 双向BFS + 曼哈顿距离
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3085 Nightmare Ⅱ Time Limit: 2000/1000 MS (Java/Other ...
- hdu-2680 Choose the best route(最短路)
题目链接: Choose the best route Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- 【POJ 3468】 A Simple Problem with Integers
[题目链接] 点击打开链接 [算法] 本题用线段树很容易写,但是,笔者为了练习树状数组,就用树状数组的方法做了一遍 我们不妨引入差分数组c, 则sum(n) = c[1] + (c[1] + c[2] ...
- 微信小程序在线制作 自己制作微信小程序
小程序是个什么东西?怎么自己制作微信小程序?微信小程序在线制作难吗?最近老是听这类问题,耳朵都长茧子了. 百牛信息技术bainiu.ltd整理发布于博客园 接下来作为一个技术人员的角度就为大家分析一下 ...
- [转]Python+Selenium之expected_conditions：各种判断(上)
原文地址: https://www.jianshu.com/p/f3189f1951cc 其他类似文章: https://www.cnblogs.com/yuuwee/p/6635652.html h ...
- node --save可以省略掉手动修改package.json的步骤
当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里 ...
- hdoj4027【线段树】
题意: 给你一个序列,然后给出m个命令, 每个命令有两种:①:在区间内实现开方:②:求一个区间和: 思路: 一开始没思路啊,这个开方又不像加加减减一起来就好了,开方只能自己玩啊,但是仔细一想一个数也才 ...
- dd 使用记录
使用dd的工具 1)测试写速度 2)测试读速度 3)测试读写速度 dd说明: if是输入文本,of是输出文本,bs是块大小,count是你指定读写块的数量 /dev/zero是从内存里面读取,不会产生 ...
- 黑客攻防技术宝典web实战篇：攻击本地编译型应用程序习题
猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 如果不采用特殊的防御措施,为什么栈缓冲区溢出比堆溢出更容易被攻击者利用? 利用基于栈的溢出 ...
- NOIp 2014飞扬的小鸟【dp】By cellur925
题目传送门 放在14年Day1T3的dp题目...应该比较看出来是dp算法吧,因为在本蒟蒻看来求最值的算法不清晰时就是dp了==. 状态还是比较好设计的,考虑到每个情况需要记录下的量:f[i][j]表 ...