Canvas 炫丽的倒计时

最新推荐文章于 2023-02-28 21:00:31 发布
最新推荐文章于 2023-02-28 21:00:31 发布
阅读量1k 收藏
点赞数
分类专栏： html5+css3

转自：http://www.w3cfuns.com/blog-5452775-5401650.html


<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    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]
                ]//:
            ];
    /**
     * Created by Administrator on 2014/10/25 0025.
     */
    var WINDOW_WIDTH=1124;
    var WINDOW_HEIGHT=500;
    var RADIUS=8;
    var MARGIN_TOP=60;
    var MARGIN_LEFT=30;

    //const  endTime=new Date(2014,10,1,18,24,56);
    var   endTime=new Date();
    endTime=endTime.getTime()+8976356;
    var curShowTimeSeconds=0;

    var balls=[];
    var colors=["#33B5E5","#0099CC","#AA66CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000","#9933CC"];
    window.οnlοad=function(){
        WINDOW_HEIGHT=document.documentElement.clientHeight||document.body.clientHeight ;
        //要前台的body撑起来，否则取不到值,为解决ff兼容性的问题，最好把document.documentElement.clientHeight写在前面
        WINDOW_WIDTH=document.body.clientWidth||document.documentElement.clientWidth;
        MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
        RADIUS=Math.round(WINDOW_WIDTH*4/5/108)-1;//还记得108怎么得来的吗？
        MARGIN_TOP=Math.round(WINDOW_HEIGHT/5);

        var convas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        convas.width=WINDOW_WIDTH;
        convas.height=WINDOW_HEIGHT;

        curShowTimeSeconds=getCurrentShowTimeSeconds();

        setInterval(
                function(){
                    render(context);
                    update();
                } ,
                50
        );


    }
    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(nextHours!=curHours){
                addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));
            }
            if(nextHours%10!=curHours%10){
                addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
            }

            if(nextMinutes!=curMinutes){
                addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
            }
            if(nextMinutes%10!=curMinutes%10){
                addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));
            }

            if(nextSeconds!=curSeconds){
                addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
            }
            if(nextSeconds%10!=curSeconds%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=-balls[i].vy*0.75;
            }
        }
        var cnt=0;
        for(var i=0;i<balls.length;i++){
            if(balls[i].x+RADIUS>0 && balls[i].x-RADIUS<WINDOW_WIDTH){
                balls[cnt++]=balls[i];
            }
        }

        while(balls.length>Math.min(400,cnt)){
            balls.pop();//删除数组末尾的值
        }
    }

    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 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 getCurrentShowTimeSeconds(){
        var curTime=new Date();
        var ret=endTime-curTime.getTime();
        ret=Math.round(ret/1000);
        return ret>=0 ? ret : 0;
    }

    function render(txt){
        txt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//对矩形空间的动画进行一次刷新

        var hours=parseInt(curShowTimeSeconds/3600);
        var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
        var seconds=curShowTimeSeconds%60;

        renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),txt);
        renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),txt);
        renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,txt);

        renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),txt);
        renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),txt);
        renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,txt);

        renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),txt);
        renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),txt);

        for(var i=0;i<balls.length;i++){
            txt.beginPath();
            txt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
            txt.closePath();
            txt.fillStyle=balls[i].color;
            txt.fill();
        }

    }
    function renderDigit(x,y,num,txt){
        txt.fillStyle="rgb(0,120,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){
                    txt.beginPath();
                    txt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
                    txt.closePath();

                    txt.fill();
                }
            }
        }
    }

</script>
<body style="height: 100%;">
    <canvas id="canvas" style="height: 100%;">
        当前浏览器不支持Canvas，请更换其他浏览器再试！
    </canvas>


</body>
</html>
SunShine0427
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas基础绘制-绚丽倒计时的实例
08-29
在本实例中，我们将探讨如何使用HTML5的canvas元素创建一个绚丽的倒计时效果。首先，我们需要了解canvas的基本概念。HTML5的canvas是一个二维绘图API，允许开发者通过JavaScript来绘制图形，包括线条、形状、图像等...
利用canvas实现炫酷的倒计时效果
利用Transition过渡完成手风琴菜单
08-28 1576
1.效果预览（文章最后面有源码） 2.代码实现 2.1 简要分析 这个案例可以大概分成三步来实现：首先绘制出时间，然后根据时间的变动产生相应的彩色小球，最后让这些小球运动起来。 第一步：通过观察我们可以看到，这些时间都是用一个个小球拼出来的，所以我们采用的方法就是利用一个点阵来表示一个数字，例如数字0就可以用如下的点阵来表示，具体绘制的时候，在数字1的位置进...
使用canvas实现倒计时效果
JiangLittleBai的博客
01-18 3231
假设现在离新闻联播开始还有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绘制倒计时
风舞红枫的个人博客
03-05 503
canvas绘制倒计时
用canvas画一个炫酷的粒子动画倒计时
小陈的博客
02-28 3109
canvas是HTML5中新增的一个标签，主要是用于网页实时生成图像并可操作图像，它是用JavaScript操作的bitmap。🤨 在JavaScript中定义所需的变量numberStage - stageCenterY 这一块主要是定义画布宽高和坐标countdownFrom 从 10 开始倒计时countdownTimer 数字显示的时长countdownRunning 动起来colors 页面上所有粒子颜色其他的可以自己理解一下哦~
canvas环形倒计时
weixin_33726313的博客
11-04 350
效果如下图一： canvas环形倒计时 Canvas环形倒计时是基于Canvas实现的倒计时，建议于移动端使用 Canvas环形倒计时 下载地址 一、如何使用 1. html代码 ID属性可随意取名 <canvas id="canvas"></canvas> 复制代码2. 引入process.js文件 页面引用 <script src="js/process.js"...
绚丽的canvas倒计时效果
11-04
绚丽的canvas倒计时效果 HTML 5 <canvas> 标签
炫丽的倒计时效果Canvas绘图与动画
06-28
在本文中，我们将深入探讨如何使用原生JavaScript和HTML5的Canvas API来创建炫丽的倒计时效果。Canvas是一个强大的绘图工具，允许开发者在网页上动态绘制图形，包括复杂的动画效果。在这个实例中，我们将关注倒计时...
canvas倒计时
08-06
本教程将深入探讨如何利用Canvas实现炫丽的倒计时效果，以及相关的绘图与动画基础。 首先，我们需要理解Canvas的基本用法。在HTML中，创建一个Canvas元素很简单，只需在body标签内添加`<canvas id="myCanvas"></...
基于HTML5 canvas圆形倒计时器jQuery插件
03-19
基于HTML5 canvas圆形倒计时器jQuery插件
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
10-17
主要介绍了vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用） ,需要的朋友可以参考下
html5倒计时制作酷炫的canvas粒子动画倒计时代码
11-10
html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码
HTML5 Canvas 3D 倒计时爆炸特效
09-12
HTML5 Canvas 3D 倒计时爆炸特效
小程序canvas绘制倒计时
梦逸灵箭——的博客
08-31 882
如果本文对你有用，请爱心点个赞，提高排名，帮助更多的人。谢谢大家！❤ 如果解决不了，可以在文末进群交流。 效果展示： //广告倒计时 advTimeCountDown:function(advTime){ var step = 1,//计数动画次数 num = 0,//计数倒计时秒数（n - num） start = 1.5 * M...
canvas实现绚丽的倒计时效果代码分析(原demo来源慕课网https://www.imooc.com/learn/133)
qq_45274161的博客
03-31 330
#实现效果
基于canvas制作绚丽的倒计时效果
AFeng521web
08-30 800
基于canvas制作绚丽的倒计时效果 一、先看下效果 二、canvas是一个可是使用脚本（通常是javascript）在其中绘制图形的HTML元素，同时canvas也是定义在浏览器上的画布，canvas不仅仅像p标签等是一个元素，更是一个编辑工具，是一套编程接口，它的出现已超过了web基于文本设计的初衷。canvas可以设计出绚丽多彩的动画，奇妙的游戏等，可以使我们的网页绚丽多彩！ 三...
canvas绚丽的倒计时效果
xinqilela的博客
03-05 535
1.index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body style=&q
canvas制作倒计时炫丽效果
最新发布
05-17
好的，以下是一个简单的canvas倒计时炫丽效果的示例代码，你可以根据自己的需求进行修改和优化： HTML代码： ```html <canvas id="canvas" width="300" height="300"></canvas> ``` JavaScript代码： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值