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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
前端JavaScript大管家 package.json
Nov 02 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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
pyspark 随机森林的实现
2020/04/24 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
网站开发实习生的自我评价
2013/12/11 职场文书
迟到早退检讨书
2014/02/10 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
教师一帮一活动总结
2014/07/08 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
预备党员半年考察意见
2015/06/01 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
Python学习之包与模块详解
2022/03/19 Python
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫