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> < ...
随机推荐
- Uva 3902 Network
题目大意: 在非叶子节点上安装最少的服务器使得,每个叶子节点到服务器的距离不超过k. 贪心+图上的dfs. 先从深度最大的叶子节点开始找.找到父节点后再用这个父节点进行扩充. /* ********* ...
- css3某些特性
在下列情况下,建议使用opacity属性而不是rgba()函数 1.实现多种颜色(元素)的半透明效果.使用opacity属性,不仅背景颜色,就连文本颜色.边框颜色都会变透明. 2.在不知道颜色的情况下 ...
- react项目中的注意点
一.ES6 的编译方法 目前主流的浏览器还不支持ES6. 现在一般采用webpack 和 <script type="text/babel">对jsx 语法进行编译, ...
- UVA11613 Acme Corporation —— 最小费用流（流量不固定的最小费用流）
题目链接:https://vjudge.net/problem/UVA-11613 题意: 商品X在第i个月内:生产一件需要花费mi元,最多可生产ni件,销售一件(在这个月内销售,而不管它是在那个月生 ...
- poj 1195 Mobile phones 解题报告
题目链接:http://poj.org/problem?id=1195 题目意思:有一部 mobie phone 基站,它的面积被分成一个个小正方形(1 * 1 的大小),所有的小正方形的面积构成了一 ...
- codeforces 665E E. Beautiful Subarrays(trie树)
题目链接: E. Beautiful Subarrays time limit per test 3 seconds memory limit per test 512 megabytes input ...
- 使用cocoaPods加载框架的具体步骤:
注意事项: 1.使用之前备份一下代码.因为pod更新很快,如果某个文件名有中文,pod install 一下.整个项目可能就要废掉了. 2.如果不把pod文件推动到远程服务器. 每一次用的时候在本地p ...
- 理解Objective-C Runtime（四）Method Swizzling
Objective-C对象收到消息之后,究竟会调用何种方法需要在运行期间才能解析出来.那你也许会问:与给定的选择子名称相应的方法是不是也可以在runtime改变呢?没错,就是这样.若能善用此特性,则可 ...
- Python3中使用PyMongo的方法详解
前言 本文主要给大家介绍的是关于在Python3使用PyMongo的方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细介绍: MongoDB存储 在这里我们来看一下Python3下Mongo ...
- 聊聊Spring的核心组件
Spring的核心是IOC容器,它本质上是一个bean关系集合.而要实现它也是有beans,context,core三个模块完成的. beans包主要是负责bean的定义,创建和解析工作,里面用到了简 ...