首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

喵嘻嘻

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
js函数般调用正则
Apr 08 Javascript
javaScript 简单验证代码（用户名，密码，邮箱)
Sep 28 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 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
SONY(15) 短波(1) 索尼(5) TOSHIBA(1) 德劲(5) 天线(6) RP-F11(1) PL-880(1) ICF-7600(1) 东芝(1)
You might like
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
webpack热模块替换（HMR）/热更新的方法
2018/04/05 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
python 异常处理总结
2016/10/18 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
python可视化实现KNN算法
2019/10/16 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
QA工程师岗位职责
2013/11/20 职场文书
大学生作弊检讨书
2014/09/11 职场文书
春秋淹城导游词
2015/02/11 职场文书
死者家属慰问信
2015/03/24 职场文书
开学典礼致辞
2015/07/29 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Redis keys命令的具体使用
2022/06/05 Redis
Go gorilla/sessions库安装使用
2022/08/14 Golang