canvas基础绘制-绚丽倒计时的实例


Posted in Javascript onSeptember 17, 2017

效果图:

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 >
<canvas id="canvas" ></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基础绘制-绚丽倒计时的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
React列表栏及购物车组件使用详解
Jun 28 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 #Javascript
JS分页的实现(同步与异步)
Sep 16 #Javascript
AngularJs 延时器、计时器实例代码
Sep 16 #Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 #Javascript
Javascript 严格模式use strict详解
Sep 16 #Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 #Javascript
JS闭包的几种常见形式实例详解
Sep 16 #Javascript
You might like
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
php比较相似字符串的方法
2015/06/05 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
使用python Django做网页
2013/11/04 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
一个SQL面试题
2014/08/21 面试题
Ejb技术面试题
2015/04/29 面试题
初中毕业生的自我评价
2014/03/03 职场文书
酒店端午节活动方案
2014/08/26 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
七年级上册生物的课件
2019/08/07 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
SpringBoot 集成Redis 过程
2021/06/02 Redis
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python