canvas绚丽的倒计时效果

最新推荐文章于 2024-06-17 14:02:51 发布
最新推荐文章于 2024-06-17 14:02:51 发布
阅读量548 收藏
点赞数
分类专栏： canvas 文章标签： html5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinqilela/article/details/60476542
版权 
1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="height:100%;">
   <canvas id="canvas" style="height:100%;margin:0 10%;">
       您的浏览器不支持canvas元素。
   </canvas>
   <script src="numMatrix.js"></script> 
   <script src="script.js"></script> 
</body>
</html>

2.numMatrix.js

var numMatrix = [
    [
            [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]
    ] //冒号矩阵
];

3.script.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 600;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

//定义截止时间
var endTime = new Date();
endTime.setTime(endTime.getTime() + 60 * 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;
    
    MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);
    MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);
    
    RADIUS = Math.round(WINDOW_WIDTH * 4 /5 /108) - 1;
    
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    
    curShowTimeSeconds = getCurrentShowTimeSeconds();
    
    setInterval(function(){
        render(context);
        update();
    },50);   
};
//返回以秒数表示的当前时间
function getCurrentShowTimeSeconds() {
    var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();
    ret = Math.round(ret/1000);
//    var ret = curTime.getHours()*3600+curTime.getMinutes()*60+curTime.getSeconds();
    return ret >= 0? ret : 0;
//    return ret;
}
//更新操作
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(); //对所有已经存在的小球的状态进行更新
    console.log(balls.length);
}
//对所有已经存在的小球的状态进行更新
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 - RADIUS) {
            balls[i].y = WINDOW_HEIGHT - RADIUS;
            balls[i].vy = -Math.abs(balls[i].vy)*0.75;
        }
    }
    var cnt = 0;
    for(var i = 0;i < balls.length;i++) {
        //小球的右边缘大于0并且左边缘小于画面的宽度
        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 < numMatrix[num].length;i++){
        for(var j = 0;j < numMatrix[num][i].length;j++) {
            if(numMatrix[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,
                    vy: -5,
                    color : colors[Math.floor(Math.random()*colors.length)]
                };
                balls.push(aBall);
            }
        }
    }
}
//绘制当前时间
function render(context) {
    context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
    
    var hours = parseInt(curShowTimeSeconds / 3600);
    var minutes = parseInt((curShowTimeSeconds - hours * 3600)/ 60);
    var seconds = curShowTimeSeconds % 60;
    
    renderMatrix(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), context); //十位上的数字
    renderMatrix(MARGIN_LEFT + (7 * 2 +1 )*(RADIUS+1),MARGIN_TOP,parseInt(hours % 10),context); //个位上的数字
    
    renderMatrix(MARGIN_LEFT + 30*(RADIUS+1),MARGIN_TOP,10,context); //冒号
    
    renderMatrix(MARGIN_LEFT + (30 + (4 * 2 + 1))*(RADIUS+1),MARGIN_TOP,parseInt(minutes / 10),context); //十位上的数
    renderMatrix(MARGIN_LEFT + 54*(RADIUS+1),MARGIN_TOP,parseInt(minutes % 10),context); //个位上的数
    
    renderMatrix(MARGIN_LEFT + 69*(RADIUS+1),MARGIN_TOP,10,context); //冒号
    
    renderMatrix(MARGIN_LEFT + (69 + (4 * 2 + 1))*(RADIUS+1),MARGIN_TOP,parseInt(seconds / 10),context); //十位上的数
    renderMatrix(MARGIN_LEFT + 93 * (RADIUS+1),MARGIN_TOP,parseInt(seconds % 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,false);
        context.closePath();
        
        context.fill();
    }
}
//绘制小球
function renderMatrix(x,y,num,context) {
    context.fillStyle = "rgb(0,102,153)";
    for(var i = 0;i < numMatrix[num].length;i++) { //每一个数字矩阵的行
        for(var j = 0;j < numMatrix[num][i].length;j++) {
            if(numMatrix[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,false);
                context.closePath();
                context.fill();
            }
        }
    }
}

xinqilela
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用canvas实现倒计时效果
JiangLittleBai的博客
01-18 3242
假设现在离新闻联播开始还有3分钟21秒。现在要通过canvas实现这个以03:21开始以00：00结束的倒计时。问题的关键在于，如何通过canvas绘制03:21 、02:36。简化问题，我们可以使用canvas绘制0、3、"："、2、1形状的图画，时间改变，再次重新绘制即可。绘制数字和符号“：”以绘制数字0为例，0的绘制可以借助一个二维数组。 var arc=[ [0,0,1,1,1,0
基于canvas制作绚丽的倒计时效果
AFeng521web
08-30 823
基于canvas制作绚丽的倒计时效果 一、先看下效果 二、canvas是一个可是使用脚本（通常是javascript）在其中绘制图形的HTML元素，同时canvas也是定义在浏览器上的画布，canvas不仅仅像p标签等是一个元素，更是一个编辑工具，是一套编程接口，它的出现已超过了web基于文本设计的初衷。canvas可以设计出绚丽多彩的动画，奇妙的游戏等，可以使我们的网页绚丽多彩！ 三...
绚丽的canvas倒计时效果
11-04
绚丽的canvas倒计时效果 HTML 5 标签
Canvas倒计时
最新发布
valsedefleurs的博客
06-17 337
用Canvas绘制一个倒计时组件，显示距离新年还有多长时间，精确到秒，该倒计时需要实时更新。
更新——Canvas画布动画效果之实现倒计时
weixin_30408309的博客
10-14 203
Hello，大家好！ 小W复活啦！继续欢乐的给大家更博，输送新知识~~ 不开玩笑啦！秒进正题~~~ 上次更博，小W给大家介绍了Canvas画布的基础部分，以及实现了一个由7*10点阵图显示的倒计时的基本架构。 上次的效果如下图所示，仅仅只是一个时间的静态显示而已： 今天呢，小W想实现就是，让它开始倒计时！效果先给大家看一下： Canvas画布用于图形的绘制、动画，都是通过脚本（...
canvas：制作一个很炫的倒计时
weixin_33720452的博客
08-24 123
canvas：制作一个很炫的倒计时1、目的：很多网站都会用到倒计时，如：天猫等。本文讲述的是一个用canvas实现的绚丽的倒计时。2、原理：canvas标签类似于html的其他标签，<canvas></canvas>,canvas就相当于一张画布，可以在上面绘制各种自己想要的效果。数字的点阵实现，利用0和1，0标示不填充，1表示...
利用canvas实现炫酷的倒计时效果
利用Transition过渡完成手风琴菜单
08-28 1598
1.效果预览（文章最后面有源码） 2.代码实现 2.1 简要分析 这个案例可以大概分成三步来实现：首先绘制出时间，然后根据时间的变动产生相应的彩色小球，最后让这些小球运动起来。 第一步：通过观察我们可以看到，这些时间都是用一个个小球拼出来的，所以我们采用的方法就是利用一个点阵来表示一个数字，例如数字0就可以用如下的点阵来表示，具体绘制的时候，在数字1的位置进...
canvas基础绘制-绚丽倒计时的实例
08-29
在本实例中，我们将探讨如何使用HTML5的canvas元素创建一个绚丽的倒计时效果。首先，我们需要了解canvas的基本概念。HTML5的canvas是一个二维绘图API，允许开发者通过JavaScript来绘制图形，包括线条、形状、图像等...
炫丽的倒计时效果Canvas绘图与动画
06-28
在本文中，我们将深入探讨如何使用原生JavaScript和HTML5的Canvas API来创建炫丽的倒计时效果。Canvas是一个强大的绘图工具，允许开发者在网页上动态绘制图形，包括复杂的动画效果。在这个实例中，我们将关注倒计时...
绚丽的计时效果Canvas绘图与动画基础
05-28
这个“绚丽的计时效果Canvas绘图与动画基础”项目，旨在帮助学习者掌握基于Canvas的计时动画基础知识，通过实践加深对Canvas的理解。 在HTML5中，`<canvas>`元素是一个可绘制图形的画布，通过JavaScript来控制其...
canvas绘制倒计时
风舞红枫的个人博客
03-05 510
canvas绘制倒计时
canvas倒计时
08-06
炫丽的倒计时效果Canvas绘图与动画基础
HTML5 Canvas 3D 倒计时爆炸特效
09-12
HTML5 Canvas 3D 倒计时爆炸特效
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
10-17
主要介绍了vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用） ,需要的朋友可以参考下
canvas制作倒计时
sinat_36581022的博客
11-07 1998
canvas制作倒计时的绚丽效果 HTML代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas倒计时效果</title> </head> <body style="height: 100%"> <canvas id="canvas" style="height: 100%">
Canvas绚丽倒计时学习笔记
Hi~ o(*￣▽￣*)ブ
03-10 858
演示(ˉ▽￣～)     |    文件(,,• ₃ •,,)    |   汁源╭( ･ㅂ･)و ̑̑ Foreword 关于Canvas HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过，<canvas>元素本身并没有绘制能力（它仅仅是图形的容器）， 您必须使用脚本来完成实际的绘图任务。  [该叙述来自W3CSCHOOL]Creat Canv
Canvas实现绚丽的倒计时效果（动画效果）
xxhy的博客
11-01 1354
HTMLhtml很简单，引入两个文件digit.js：存放每个数字的点阵数据 countdown.js：主要逻辑<!DOCTYPE html> <html lang="en"> <head>![这里写图片描述](http://img.blog.csdn.net/20161101175756119) <meta charset="UTF-8"> <title>绚丽的倒计时效果</ti
canvas-炫丽的倒计时效果Canvas绘图与动画基础
weixin_30896511的博客
08-08 135
canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题，如下图所示。（截图自can i use） tips：刚刚拿去ie8下测了一下，什么反应都没有，提前设定好的，如果该浏览器不支持的话要提示的也不提示， 开发者工具中的Element中的代码也什么都没有。 HTML: 　　<canvas id="canv...
小程序canvas绘制倒计时
梦逸灵箭——的博客
08-31 904
如果本文对你有用，请爱心点个赞，提高排名，帮助更多的人。谢谢大家！❤ 如果解决不了，可以在文末进群交流。 效果展示： //广告倒计时 advTimeCountDown:function(advTime){ var step = 1,//计数动画次数 num = 0,//计数倒计时秒数（n - num） start = 1.5 * M...
canvas制作倒计时炫丽效果
05-17
好的，以下是一个简单的canvas倒计时炫丽效果的示例代码，你可以根据自己的需求进行修改和优化： HTML代码： ```html <canvas id="canvas" width="300" height="300"></canvas> ``` JavaScript代码： ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width = canvas.width; var height = canvas.height; var endTime = new Date(2022, 1, 1, 0, 0, 0); // 设置倒计时结束时间 var interval = 1000; // 倒计时更新间隔 var colors = ["#FF0000", "#FFA500", "#FFFF00", "#008000", "#0000FF", "#4B0082", "#EE82EE"]; // 渐变颜色数组 function draw() { var now = new Date(); // 获取当前时间 var remaining = endTime - now; // 计算剩余时间 if (remaining < 0) { // 如果剩余时间为负数，停止倒计时 clearInterval(intervalId); return; } ctx.clearRect(0, 0, width, height); // 清空画布 var seconds = Math.floor(remaining / 1000); // 计算剩余秒数 var minutes = Math.floor(seconds / 60); // 计算剩余分钟数 var hours = Math.floor(minutes / 60); // 计算剩余小时数 var days = Math.floor(hours / 24); // 计算剩余天数 seconds %= 60; // 计算剩余秒数 minutes %= 60; // 计算剩余分钟数 hours %= 24; // 计算剩余小时数 var time = days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"; // 格式化剩余时间 ctx.font = "bold 30px Arial"; // 设置字体 ctx.fillStyle = "#FFFFFF"; // 设置字体颜色 ctx.fillText(time, 50, 150); // 绘制剩余时间文字 var gradient = ctx.createLinearGradient(0, 0, width, height); // 创建渐变对象 for (var i = 0; i < colors.length; i++) { gradient.addColorStop(i / (colors.length - 1), colors[i]); // 添加渐变颜色 } ctx.beginPath(); // 开始绘制圆形进度条 ctx.arc(150, 150, 100, -Math.PI / 2, (2 * Math.PI * remaining / (endTime - now)) - Math.PI / 2, false); ctx.strokeStyle = gradient; // 设置进度条颜色为渐变色 ctx.lineWidth = 10; // 设置进度条宽度 ctx.stroke(); // 绘制进度条 } var intervalId = setInterval(draw, interval); // 开始倒计时 ``` 在上面的示例代码中，我们使用canvas绘制了一个倒计时炫丽效果，具体来说，我们： 1. 在HTML中添加了一个canvas元素并设置了它的宽度和高度； 2. 在JavaScript中获取了canvas元素和它的上下文对象ctx，并设置了倒计时结束时间endTime、倒计时更新间隔interval、渐变颜色数组colors等变量； 3. 定义了一个绘制函数draw，它会在每次更新时被调用； 4. 在draw函数中，我们首先获取当前时间now，然后计算出剩余时间remaining，如果剩余时间小于0，则停止倒计时； 5. 接着，我们清空画布，计算出剩余天数、小时数、分钟数和秒数，并格式化剩余时间； 6. 我们使用ctx.fillText方法绘制剩余时间文字，并使用ctx.createLinearGradient方法创建渐变对象gradient，并将渐变颜色添加到它里面； 7. 最后，我们使用ctx.arc方法绘制圆形进度条，并设置进度条颜色为渐变色，绘制进度条。 你可以根据自己的需求和喜好修改绘制函数的各个参数和细节，例如改变字体、字体颜色、进度条宽度、渐变颜色等，以达到更好的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值