canvas绚丽的倒计时效果

最新推荐文章于 2024-07-24 21:11:51 发布
最新推荐文章于 2024-07-24 21:11:51 发布
阅读量536 收藏
点赞数
分类专栏： 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制作绚丽的倒计时效果
AFeng521web
08-30 800
基于canvas制作绚丽的倒计时效果 一、先看下效果 二、canvas是一个可是使用脚本（通常是javascript）在其中绘制图形的HTML元素，同时canvas也是定义在浏览器上的画布，canvas不仅仅像p标签等是一个元素，更是一个编辑工具，是一套编程接口，它的出现已超过了web基于文本设计的初衷。canvas可以设计出绚丽多彩的动画，奇妙的游戏等，可以使我们的网页绚丽多彩！ 三...
Canvas实现绚丽的倒计时效果（动画效果）
xxhy的博客
11-01 1349
HTMLhtml很简单，引入两个文件digit.js：存放每个数字的点阵数据 countdown.js：主要逻辑<!DOCTYPE html> <html lang="en"> <head>![这里写图片描述](http://img.blog.csdn.net/20161101175756119) <meta charset="UTF-8"> <title>绚丽的倒计时效果</ti
利用canvas实现炫酷的倒计时效果
利用Transition过渡完成手风琴菜单
08-28 1579
1.效果预览（文章最后面有源码） 2.代码实现 2.1 简要分析 这个案例可以大概分成三步来实现：首先绘制出时间，然后根据时间的变动产生相应的彩色小球，最后让这些小球运动起来。 第一步：通过观察我们可以看到，这些时间都是用一个个小球拼出来的，所以我们采用的方法就是利用一个点阵来表示一个数字，例如数字0就可以用如下的点阵来表示，具体绘制的时候，在数字1的位置进...
canvas制作倒计时
sinat_36581022的博客
11-07 1994
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 852
演示(ˉ▽￣～)     |    文件(,,• ₃ •,,)    |   汁源╭( ･ㅂ･)و ̑̑ Foreword 关于Canvas HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过，<canvas>元素本身并没有绘制能力（它仅仅是图形的容器）， 您必须使用脚本来完成实际的绘图任务。  [该叙述来自W3CSCHOOL]Creat Canv
canvas制作倒计时炫丽效果
weixin_30647065的博客
02-01 82
<!DOCTYPE html> <head> <title>canvas倒计时</title> <style> .canvas{ display: block; border: 1px solid #000; margin: 50px auto; } </style> <...
炫丽的倒计时效果
muzi187的博客
09-06 184
慕课学习--&gt;前端开发--&gt;炫丽的倒计时效果Canvas绘图与动画基础 使用canvas画布实现绚丽的倒计时动画 heml &lt;!doctype html&gt; &lt;html lang="en" style="height:100%;"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &l
canvas基础绘制-绚丽倒计时
u011927449的博客
11-06 128
效果图： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ball</title...
炫丽的倒计时效果Canvas绘图与动画基础
weixin_30443813的博客
03-19 198
前言 想要在自己做的网页中，加入canvas动画效果，但是发现模板各种调整不好，觉得还是要对canvas有所了解，才可以让自己的网页变得狂拽炫酷吊炸天！ 一、绘制基础 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 ...
绚丽的canvas倒计时效果
11-04
绚丽的canvas倒计时效果 HTML 5 <canvas> 标签
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来控制其...
探索WebKit的画布世界：HTML5 ＜canvas＞ 元素的深度解析
2401_85743969的博客
07-24 1203
canvas>是一个HTML元素，用于通过脚本（通常是JavaScript）动态渲染图形。它提供了一个矩形区域，可以用于线条、曲线、文字和图像的绘制。
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1435
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值