使用js画布（canvas）实现倒计时特效

最新推荐文章于 2024-08-07 05:09:36 发布
最新推荐文章于 2024-08-07 05:09:36 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： 前端 文章标签： canvas javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35954591/article/details/78595362
版权

一、文章前言

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 = 1200
var WINDOW_HEIGHT = 768
var RADIUS = 8
var MARGIN_LEFT = 50
var MARGIN_TOP = 50 

var curShowTimeSeconds = 0

var 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就是一种神奇的语言，若能掌握明了，必定带给你意想不到的快乐。

（本文参考慕客网视频资料，具体哪一个不清楚了）

SGD_wrong
关注
专栏目录
canvas倒计时
暖心少年
05-29 419
链接：https://pan.baidu.com/s/1_ZXkWb8cZkmYREPQInqhsg 密码：8hhm
html5倒计时制作酷炫的canvas粒子动画倒计时代码
11-10
html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码
JavaScript青少年简明教程：canvas（画布）元素入门
最新发布
cnds123的专栏
08-07 912
JavaScript青少年简明教程：canvas（画布）元素
更新——Canvas画布动画效果之实现倒计时
weixin_30408309的博客
10-14 212
Hello，大家好！ 小W复活啦！继续欢乐的给大家更博，输送新知识~~ 不开玩笑啦！秒进正题~~~ 上次更博，小W给大家介绍了Canvas画布的基础部分，以及实现了一个由7*10点阵图显示的倒计时的基本架构。 上次的效果如下图所示，仅仅只是一个时间的静态显示而已： 今天呢，小W想实现就是，让它开始倒计时！效果先给大家看一下： Canvas画布用于图形的绘制、动画，都是通过脚本（...
利用canvas实现炫酷的倒计时效果
利用Transition过渡完成手风琴菜单
08-28 1606
1.效果预览（文章最后面有源码） 2.代码实现 2.1 简要分析 这个案例可以大概分成三步来实现：首先绘制出时间，然后根据时间的变动产生相应的彩色小球，最后让这些小球运动起来。 第一步：通过观察我们可以看到，这些时间都是用一个个小球拼出来的，所以我们采用的方法就是利用一个点阵来表示一个数字，例如数字0就可以用如下的点阵来表示，具体绘制的时候，在数字1的位置进...
JS + HTML 5 （Canvas） - 画圆饼动画，也是countdown倒计时的简单实现。
巍的博
01-16 7721
代码及结果预览，在 JSFiddle 上：http://jsfiddle.net/ylem/XnsCK/ 代码很简单，给大伙一个范例，其中把 n = 10 修改为 60 就算是简单的倒计时了。 原理一句话，就是 每秒画 step / n 的圆。 如果对canvas画圈不熟的同学可以看这里：http://www.w3school.com.cn/html5/canvas_arc.asp
Canvas粒子十秒倒计时特效.zip
10-05
【Canvas粒子十秒倒计时特效】是一种在网页中实现的动态视觉效果，它结合了HTML5的Canvas元素、JavaScript编程以及可能的jQuery库来创建一个引人注目的计时器。Canvas是HTML5的一个重要特性，允许开发者在网页上进行...
基于Html5+Canvas实现2016年七夕情人节倒计时特效源码.zip
11-21
本项目“基于Html5+Canvas实现2016年七夕情人节倒计时特效源码”就是一个很好的示例，展示了HTML5的创新功能在实际应用中的魅力。 Canvas是HTML5中的一个核心元素，它提供了在网页上进行动态图形绘制的能力。通过...
HTML5 Canvas 3D倒计时爆炸特效源码.zip
11-20
2. **3D图形处理**：尽管Canvas主要是2D绘图工具，但通过一些技巧和库（如Three.js），开发者可以实现3D效果。在这个案例中，可能是通过变换坐标系和投影来模拟3D效果，或者利用WebGL，这是一个JavaScript API，直接...
H5带下雪效果的新年倒计时特效
06-24
本项目"带下雪效果的新年倒计时特效"是HTML5 Canvas技术的一个应用场景，通过Canvas来实现一个具有视觉吸引力的新年庆祝元素：全屏下雪背景动画和倒计时功能。 首先，让我们深入了解一下HTML5 Canvas。Canvas是一个...
利用 canvas 实现圆形进度条，实现倒计时效果
qq_43527314的博客
11-21 2634
#实现圆环渐变倒计时效果 内容 效果图 需求分析 实现技术 实现过程 全部源码 1. 效果图展示 随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止. 2. 需求分析 可以自定义倒计时结束的时间 圆环的颜色是渐变的 倒计时的动画在视觉上是流畅运行, 而不是一帧一帧的减少 3. 实现的技术 语言 框架 HTML5 无 CSS3 BootStrap SASS JavaScript 无 4. 实现的过程 1. HTML 部分 主要用到
炫丽的倒计时效果Canvas绘图与动画
06-28
原生js canvas画布绘制 炫丽的倒计时效果Canvas绘图与动画
绚丽的canvas倒计时效果
11-04
绚丽的canvas倒计时效果 HTML 5 标签
HTML+CSS+JS 倒计时动画效果
2303_82176667的博客
06-12 943
【代码】HTML+CSS+JS 倒计时动画效果。
canvas绘图， 倒计时特效时钟
胡桃夹子
11-01 1768
/** 参数为html文档上画布canvas的id,必须有canvas元素,把canvas的id填入此处,作为参数传入* write by: zhuxiangfei* QQ: 1032983642@qq.com*/function clock(canvas_id){!function(canvas_id){"begin of api";var width = 1000;//绘制主要以width为参
[html]一个动态js倒计时小组件
IceFlame的博客
04-16 480
【代码】[html]一个动态js倒计时小组件。
canvas画倒计时
听海丶的博客
05-03 498
//画倒计时 function drawProcess(num) { var process = num / 600 * 100; var text = Math.ceil(num / 10); // 一个canvas标签 var canvas = $(".process")[0]; // 拿到绘图上下文,目前只支
HTML5 canvas画布写炫彩动态的倒计时效果
weixin_33898876的博客
09-23 195
html代码如下，插入了2个js代码。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>canvas</title> 5 </head> 6 <body> 7 <canvas id="canvas" style="b...
慕课网canvas倒计时时钟
DreamFJ的博客
08-06 639
效果： 思路： 1.数字——都是由原点形成，乍一看这些圆点的排布没有规律，但是仔细观察会发现这些圆点要么在一条横线上，要么在一条竖线上。所以可以用一个点阵来表示，1表示实心圆，0表示空白。 eg: 所以需要建一个文件，单独存放数字0-9的矩阵A10*7，当然还有冒号A10*4。 2.绘制——绘制的时候需要知道具体的时分秒，所以要定义相关的变量 hours minutes s...
Canvas环形倒计时组件示例与参数详解
本文详细介绍了如何使用Canvas技术实现一个环形倒计时组件。首先，我们通过HTML结构定义了一个`<canvas>`元素，并设置了ID以便在JavaScript中引用。然后，引入了名为`process.js`的外部脚本来处理倒计时逻辑。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值