canvas实现时钟小球掉落效果和倒计时效果

最新推荐文章于 2023-02-23 15:54:18 发布
最新推荐文章于 2023-02-23 15:54:18 发布
阅读量598 收藏
点赞数
分类专栏： h5 canvas 文章标签： h5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zpr5554321/article/details/87879578
版权
canvas 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
h5
1 篇文章 0 订阅
订阅专栏

这个也是慕课网学的，挺好玩的，也是canvas实现的2d小球效果，可以把其中的代码注释一下就可以变为倒计时效果。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin:0;height: 100%">
    <canvas id="canvas" style="width:100%;height: 100%"></canvas>
    <script src="js/digit.js"></script>
    <script src="js/countdown.js"></script>
</body>
</html>

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]
        ]//:
    ];

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();
//可以自己设置倒计时的时间
endTime.setDate(new Date().getDate()+1);
var curShowTimeSeconds = 0;

var balls = [];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

function getCurrentShowTimeSeconds() {
    var time = new Date();
    //这三行代码取消注释，然后下面两行注释就是倒计时一天
    // var ret = endTime.getTime() - time.getTime();//毫秒
    // ret = Math.round(ret/1000);
    // return ret>=0?ret:0;
    var ret = time.getHours()*3600+time.getMinutes()*60+time.getSeconds();
    return ret;
}

function update() {
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();
    var curHours = parseInt(curShowTimeSeconds/3600);
    var curMinutes = parseInt((curShowTimeSeconds - curHours*3600)/60);
    var curSeconds = curShowTimeSeconds%60;

    var nextHours = parseInt(nextShowTimeSeconds/3600);
    var nextMinutes = parseInt((nextShowTimeSeconds - nextHours*3600)/60);
    var nextSeconds = nextShowTimeSeconds%60;

    //判断秒数不同了，那么更新时间
    if(curSeconds != nextSeconds){
        if(parseInt(curHours/10)!=parseInt(nextHours/10)){
            addBalls(MARGIN_LEFT,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+30*(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+69*(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-RADIUS){
            balls[i].y = WINDOW_HEIGHT-RADIUS;
            balls[i].vy = -balls[i].vy*0.75;
        }
    }
    var cnn = 0;
    for (var i=0;i<balls.length;i++){
        if(balls[i].x-RADIUS>0&&balls[i].x+RADIUS<WINDOW_WIDTH){
            balls[cnn++] = balls[i];//i的数量一定比cnn大或者等于，所以往前放
        }
    }
    while(balls.length>Math.min(300,cnn)){//比放进来的数目多的全部丢掉,限制在300以内
        balls.pop();
    }
    console.info(balls.length);
}

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 aBalls = {
                    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(aBalls);
            }

        }
    }
}

window.onload = function () {
    WINDOW_WIDTH = document.body.clientWidth||document.documentElement.clientWidth;
    WINDOW_HEIGHT = document.body.clientHeight||document.documentElement.clientWidth;

    MARGIN_LEFT = Math.round(WINDOW_WIDTH/10);
    RADIUS = Math.round(WINDOW_WIDTH*4/5/108)-1;//-1是因为算出的是radium+1的长度
    MARGIN_TOP = Math.round(WINDOW_HEIGHT/5);

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    curShowTimeSeconds = getCurrentShowTimeSeconds();
    // console.info(curShowTimeSeconds);
    setInterval(function(){
        render(context);
        update();
    },50);

}

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();
                //注意i,j
                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();
                cxt.stroke();
            }
        }
    }
}

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;
    //hour的十位数
    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 j = 0; j < balls.length;j++){
        cxt.fillStyle = balls[j].color;
        cxt.beginPath();
        cxt.arc(balls[j].x,balls[j].y,RADIUS,0,2*Math.PI);
        cxt.closePath();
        cxt.fill();

    }

}
zpr555
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
16个富有创意的HTML5 Canvas动画特效集合
weixin_34146805的博客
06-20 2261
HTML5技术正在不断的发展和更新，越来越多的开发者也正在加入HTML5阵营，甚至在移动开发上HTML5的地位也是越来越重要了。HTML5中的大部分动画都是通过Canvas实现，因为Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形状，甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子，这些例子都非常适合大家学习。 1、HTML5 Canvas高空瀑...
使用js和canvas实现时钟效果
11-19
使用js和canvas写一个时钟，供大家参考，具体内容如下 <!DOCTYPE html>` <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
HTML好看的时钟倒计时源码+雪花飘落特效
ewreht的博客
07-20 918
此源码页为单html纯代码，新年倒计时，背景雪花飘落效果，倒计时时间日期在JS/app.js文件第21行代码自行修改即可。
Canvas学习笔记——学习使用Canvas做出炫丽的时钟或倒计时效果/小球掉落效果
没沙发
09-11 644
是在慕课网上跟着这位老师的课程完成的——炫丽的倒计时效果Canvas绘图与动画基础 Canvas倒计时效果预览图 实现难点 这个小动画中需要用到的Canvas知识和Api可以参考我的另一篇博文：Canvas学习笔记——Canvas常用API方法 1、如何用小球把数字绘制出来 我们把数字变为了一个里面只有0和1的数组，1就代表小球出现的位置。如下所示。 将0-9十个数组组成的大数组命名为D...
Box2D例子——Demo0掉落的小球
lincon的专栏
09-16 1633
Box2D例子——Demo0掉落的小球
Canvas实现小球自由下落的效果
CSU_Zipple的博客
08-24 1505
效果图 ### requestAnimationFrame 利用这个API可以让动画在渲染时不那么卡顿，比setTimeOut以及setTimeInterval要好上不少。这里提供一个实现动画方法：[参考链接](https://fed.taobao.org/blog/2019/06/05/js-animation-base/) animate (time /* s */, callbac...
canvas 做出数字倒计时 （彩球掉落效果）
deideidei13的博客
03-19 303
首先是html页面代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style=...
JS实现文字掉落效果的方法
10-24
JS实现文字掉落效果是一种常见的网页特效，它模拟文字从屏幕上方掉落并最终稳定排列在指定位置的视觉效果。这种效果可以增加用户界面的互动性和趣味性。要实现这种效果，通常需要结合HTML、CSS和JavaScript技术。 ...
canvas实现动态小球重叠效果
10-20
实现小球重叠效果的一个技巧是，可以计算两个小球的中心点距离，并和它们半径之和作比较。如果中心点距离小于等于两小球半径之和，那么就认为它们重叠了。然后，可以调整重叠部分的颜色或添加特殊效果来表现这一重叠...
canvas彩色倒计时效果
最新发布
05-08
canvas彩色倒计时效果 依据canvas画布效果 实现的时间倒计时 可自己设定需要的画布大小 倒计时时钟位置 需要的倒计时时间 在秒数的切换时 会动态的更新彩色效果 适合放置到个人小站或者一些炫酷的页面中使用
利用canvas实现炫酷的倒计时效果
利用Transition过渡完成手风琴菜单
08-28 1591
1.效果预览（文章最后面有源码） 2.代码实现 2.1 简要分析 这个案例可以大概分成三步来实现：首先绘制出时间，然后根据时间的变动产生相应的彩色小球，最后让这些小球运动起来。 第一步：通过观察我们可以看到，这些时间都是用一个个小球拼出来的，所以我们采用的方法就是利用一个点阵来表示一个数字，例如数字0就可以用如下的点阵来表示，具体绘制的时候，在数字1的位置进...
canvas动画之三 -- 黑客帝国文字掉落效果
SweetoDream
12-19 7637
今天要实现的效果是黑客帝国里面的文字掉落效果，先来看一下图其实效果也是比较好实现的，只要计算出每个文字该出现的地方，然后绘制文字就可以了。下面就来说具体的实现方法吧。首先，新建页面写上canvas标签，在js中获取到并设置高宽：<canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas
利用自定义控件绘制小球并完成小球自动下落的功能
xueshuangshuang123的专栏
06-06 2034
1、布局界面 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=
彩色雨滴掉落Canvasjs特效
ICode联盟
10-23 144
下载地址 彩色雨滴掉落Canvas特效是一款透明的彩虹雨滴动画特效，支持自定义背景色和鼠标触碰雨滴散落动画特效。 dd:
ThreeCanvas.js雪花飘落3D动画js特效
ICode联盟
11-05 277
下载地址 引用js文件 JS调用var SCREEN_WIDTH = window.innerWidth;var SCREEN_HEIGHT = window.innerHeight;var container;var particle;var camera;var scene;var renderer;var mouseX = 0;var mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerH
canvas小动画（接掉落物体）
weixin_33778778的博客
11-15 488
链接描述 效果如下：
Canvas动画彩色小球下落
KatyLight的博客
12-31 310
彩色小球.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> let c=null; let ctx; let star=[]; function createStar(){ for(let i=0;i<300...
分享7款超炫的HTML5 Canvas 3D动画效果
caobihole
11-19 2194
在以前，想要在浏览器中实现3D动画效果是非常困难的，但是自从HTML5诞生之后，这就变得十分简单了。遗憾的是，目前的浏览器对3D渲染效果还不是非常理想，尤其是渲染速度，可能用chrome和safari会比较理想。下面给大家推荐几个比较炫丽的HTML5 Canvas 3D动画效果，应该能让你眼前一亮。 1、HTML5 3D旋转地球 这是一个使用HTML5 Canvas画布实现的3D旋转的地球模型...
canvas动画及案例
yunbabac的博客
02-23 2899
canvas动画
HTML实现的元旦倒计时动态效果与触摸交互
本篇文章主要介绍了一段用于实现元旦倒计时的HTML源码，结合CSS样式和JavaScript交互，为用户提供动态的视觉体验。以下是详细的知识点解析： 1. **HTML结构**： - 文档类型声明：`<!DOCTYPE html>`，标识文档是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值