使用js画布（canvas）实现倒计时特效
来源：互联网 发布：游戏神作 知乎 编辑：程序博客网 时间：2024/06/07 12:16
一、文章前言
js是一种神奇的语言，它可以实现非常炫酷的网页特效，给人一种视觉上的盛宴，下面附上倒计时的特效图。
二、内容
1.像素点般的倒计时
如图所似的倒计时是用一个个类似于像素点的小球，这是怎么实现的呢？首先学习这个需要先去了解画布的基础知识，我们需要知道时间在屏幕上该怎么画出来，显而易见肯定和画布坐标脱不了关系，然后我们就需要将一整块画布分割成３块:时、分、秒。然后我们就在每一块的区域来实现像素小球，实现这个小球我们需要准备先准备一个js文件，这个文件的作用是什么？注意看我们的每一块区域本来是一块矩形，但是现在我们要在这一块矩形里填充小球来形成数字，每一个数字的小球也是有一定的位置限制，所以我们事先需要规划好每个数字什么地方有球什么地方没有。下面给出digit.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,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0] ],//0 [ [0,0,0,1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [1,1,1,1,1,1,1] ],//1 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1] ],//2 [ [1,1,1,1,1,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//3 [ [0,0,0,0,1,1,0], [0,0,0,1,1,1,0], [0,0,1,1,1,1,0], [0,1,1,0,1,1,0], [1,1,0,0,1,1,0], [1,1,1,1,1,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,1,1] ],//4 [ [1,1,1,1,1,1,1], [1,1,0,0,0,0,0], [1,1,0,0,0,0,0], [1,1,1,1,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//5 [ [0,0,0,0,1,1,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//6 [ [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0] ],//7 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//8 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,1,1,0,0,0,0] ],//9 [ [0,0,0,0], [0,0,0,0], [0,1,1,0], [0,1,1,0], [0,0,0,0], [0,0,0,0], [0,1,1,0], [0,1,1,0], [0,0,0,0], [0,0,0,0] ]//: ];2.下面将来实现整个功能
var WINDOW_WIDTH = 1200var WINDOW_HEIGHT = 768var RADIUS = 8var MARGIN_LEFT = 50var MARGIN_TOP = 50 var curShowTimeSeconds = 0var balls = [];//该数组是给跳动的小球随机赋上颜色用的const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]window.onload = function () { // body... var canvas = document.getElementById("digit") var context = canvas.getContext("2d") canvas.width = WINDOW_WIDTH canvas.height = WINDOW_HEIGHT curShowTimeSeconds = getCurrentTimeSecond() //用个定时器不停的刷新屏幕上面的小球 var timer = setInterval(function(){ render(context) update() },50)}//时分秒三个区域当前时间若是和先前的不一样则会产生小球跳动一次function update() { // body... var nextShowTimeSecond = getCurrentTimeSecond() var nextHours = parseInt( nextShowTimeSecond / 3600); var nextMinutes = parseInt( (nextShowTimeSecond - nextHours * 3600)/60 ) var nextSeconds = nextShowTimeSecond % 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+40,MARGIN_TOP,parseInt(curHours/10)) } if (parseInt(curMinutes%10)!=parseInt(nextMinutes%10)) { addBalls(MARGIN_LEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10)) } if (parseInt(curSeconds/10)!=parseInt(nextSeconds/10)) { addBalls(MARGIN_LEFT+80,MARGIN_TOP,parseInt(curHours/10)) } if (parseInt(curSeconds%10)!=parseInt(nextSeconds%10)) { addBalls(MARGIN_LEFT+95*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10)) } curShowTimeSeconds = nextShowTimeSecond } updateBalls()}//小球跳动规律function updateBalls() { // body... 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 - RADIUS) ){ balls[i].y = WINDOW_HEIGHT-RADIUS balls[i].vy = - balls[i].vy*0.75 } }}//在屏幕上添加小球function addBalls(x,y,num) { // body... 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 oBalls = { 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, vy:-5, color:colors[ Math.floor( Math.random()*colors.length )] } balls.push(oBalls) } } }}//获取当前时间function getCurrentTimeSecond(){ var now = new Date() var endTime = new Date(2017,10,22) var leftTime = endTime.getTime() - now.getTime() var ms = Math.round(leftTime/1000) return ms}//操作画布实现小球的改变function render(context) { // body... context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT) var day = Math.floor(curShowTimeSeconds / 3600 /24) var hours = Math.floor((curShowTimeSeconds - (day*24*3600))/3600) var minute = Math.floor((curShowTimeSeconds - (hours * 3600) )/ 60) var second = Math.floor(curShowTimeSeconds - minute * 60 - hours * 3600) renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),context) renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),context) renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,context) renderDigit(MARGIN_LEFT+40*(RADIUS+1),MARGIN_TOP,parseInt(minute/10),context) renderDigit(MARGIN_LEFT+55*(RADIUS+1),MARGIN_TOP,parseInt(minute%10),context) renderDigit(MARGIN_LEFT+70*(RADIUS+1),MARGIN_TOP,10,context) renderDigit(MARGIN_LEFT+80*(RADIUS+1),MARGIN_TOP,parseInt(second/10),context) renderDigit(MARGIN_LEFT+95*(RADIUS+1),MARGIN_TOP,parseInt(second%10),context) for (var i = 0; i < balls.length; i++) { context.fillStyle = balls[i].color context.beginPath() context.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI) context.closePath() context.fill() }}function renderDigit(x,y,num,context) { // body... context.fillStyle = "blue" 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) { context.beginPath() context.arc(x+j*2*(RADIUS+1)+RADIUS+1,y+i*2*(RADIUS+1)+RADIUS+1,RADIUS,0,2*Math.PI) context.closePath() context.fill() } } }}三、总结
总而言之js就是一种神奇的语言，若能掌握明了，必定带给你意想不到的快乐。（本文参考慕客网视频资料，具体哪一个不清楚了）
阅读全文
0 0
- 使用js画布（canvas）实现倒计时特效
- 使用js转化画布与图片（canvas与img）
- canvas画布实现
- canvas绘图， 倒计时特效时钟
- Canvas（画布）类的使用
- Canvas(画布)的使用
- canvas画布的使用
- js+canvas实现QQ拨打电话特效
- JS特效之倒计时
- JS Canvas context API 画布
- Canvas类（画布）
- canvas（画布）
- （三） 使用JS实现CSS特效
- js使用setInterval实现倒计时
- H5的canvas画布使用
- JS + HTML 5 （Canvas） - 画圆饼动画，也是countdown倒计时的简单实现。
- android paint（画笔）及Canvas（画布）的使用
- 使用HTML5画布（canvas）生成阴影效果
- JAVA读取DLL，使用jacob-1.18读取ERP LN得dll脚本
- STL 反转函数 （reverse() ）
- springboot学习笔记--搭建Spring Boot工程
- 可折叠式标题栏+沉浸式状态栏
- 运行第一个 Service
- 使用js画布（canvas）实现倒计时特效
- leetcode 第38题：Count and Say
- OpenCV实践之路——人脸识别之一数据收集和预处理
- 设计模式-概念（策略模式，观察者模式，装饰者模式）
- Android 7.0 LowMemoryKiller 初识
- 子窗口与弹出窗口的坑使用笔记
- 卷积神经网络基础
- 12.2Groovy使用MetaClass拦截方法
- Android 5.x新特性之-Palette类
