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 相关文章推荐
DIV始终居中的js代码
Feb 17 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
JS解析XML实例分析
Jan 30 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 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 文件上传功能实现代码
2009/06/24 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
JsChart组件使用详解
2018/03/04 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
python虚拟环境迁移方法
2019/01/03 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
django中间键重定向实例方法
2019/11/10 Python
Django中的session用法详解
2020/03/09 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
家长对老师的感言
2014/03/11 职场文书
实习协议书范本
2014/04/22 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
浅谈react useEffect闭包的坑
2021/06/08 Javascript