[实例]canvas之炫彩时钟

最新推荐文章于 2022-09-28 11:42:22 发布
最新推荐文章于 2022-09-28 11:42:22 发布
阅读量523 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014451076/article/details/50628492
版权 
home.html

<html>
<head>
    <script src="jquery.min.js"></script>
    <script src="digit.js"></script>
    <script src="countdown.js"></script>
</head>
<body style="height: 100%">
    <div style="background: url(countdown_background_vn.jpg);background-size:cover;">
        <canvas id="canvas"></canvas>
    </div>
</body>
</html>


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;

const endTime=new Date(2016,1,3,22,0,0);
var curShowTimeSeconds=0;

var balls=[];
const colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00"];

$(function(){

    WINDOW_WIDTH=document.body.clientWidth;
    WINDOW_HEIGHT=document.body.clientHeight;

    MARGIN_LEFT=Math.round(WINDOW_WIDTH/22);
    RADIUS=Math.round(WINDOW_WIDTH*4/5/160)-1;
    MARGIN_TOP=Math.round(WINDOW_HEIGHT/5);

    var canvas=$("#canvas")[0];
    var context=canvas.getContext("2d");

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

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

    
    //render(context);
})

function getCurShowTimeSeconds(){
    var curTime=new Date();
    var ret=endTime.getTime()-curTime.getTime();
    ret=Math.round(ret/1000);
    return ret>=0?ret:0;
}

function update(){
    var nextShowTimeSeconds=getCurShowTimeSeconds();
    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();
}

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(300,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 render(cxt){

    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT); //刷新一个矩形区域

    var hours=parseInt(curShowTimeSeconds/(60*60));

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

    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 i=0;i<balls.length;i++){
        cxt.fillStyle=balls[i].color;

        cxt.beginPath();
        cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
        cxt.closePath();

        cxt.fill();
    }
}

function renderDigit(x,y,num,cxt){

    cxt.fillStyle="#76EE00";

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


明天去哪
关注
专栏目录
Canvas时钟绘制
01-20
用Canvas绘制一个时钟。
canvas：制作一个很炫的倒计时
weixin_33720452的博客
08-24 127
canvas：制作一个很炫的倒计时1、目的：很多网站都会用到倒计时，如：天猫等。本文讲述的是一个用canvas实现的绚丽的倒计时。2、原理：canvas标签类似于html的其他标签，<canvas></canvas>,canvas就相当于一张画布，可以在上面绘制各种自己想要的效果。数字的点阵实现，利用0和1，0标示不填充，1表示...
玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
04-29 8842
先给个效果图，我画的比较丑，大家可以自己美化一下， 直接上代码： 您的浏览器不支持canvas //获取画布 var clock=document.getElementById('clock'); //设置绘图环境
canvas - 炫彩小球
weixin_41040445的博客
12-13 209
<style> *{ margin: 0; padding: 0; } canvas { border: 1px solid #333; display: block; margin: 20px auto 0; } </style> <body> <canvas width="1200" height="800" id="mycanvas"&gt.
canvas炫彩小球
下雨打伞干嘛的博客
09-28 131
canvas炫彩小球。
JavaScript Canvas编写炫彩的网页时钟
10-16
在本教程中，我们将探讨如何使用JavaScript的Canvas API来创建一个炫彩的网页时钟。Canvas是HTML5中引入的一个重要特性，它允许我们在网页上动态绘制图形，从而实现丰富的视觉效果。 首先，我们需要在HTML文件中...
微信小程序使用canvas绘制实现时钟
11-01
在这个场景下，我们将讨论如何利用canvas来实现一个实时更新的时钟功能。 首先，我们需要在微信小程序的页面配置文件（如`page.json`）中声明canvas组件，设置其在页面中的位置和大小。例如： ```json { ...
canvas实现粒子时钟效果
08-31
在这个实例中，我们将利用Canvas来创建点阵数字，然后将这些数字动态地转换成显示时间的粒子时钟。 首先，我们提到的“digit.js”是一个包含0到9以及冒号的三维数组，表示每个数字的二维点阵。这个点阵是7行10列的...
html5 canvas云粒子数字时钟动画特效
11-06
在这个“html5 canvas云粒子数字时钟动画特效”中，我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API： HTML5 Canvas是一个基于矢量图形的画布，...
canvas开发的炫彩小球
09-11
基于canvas开发的html的炫彩小球效果，点击鼠标可以查看到效果
HTML5 Canvas炫彩粒子动画背景特效
06-12
这是一款基于HTML5 Canvas绘制的随机流动粒子动画背景特效，五颜六色多彩粒子动画网页背景特效代码下载。
[canvas,js]彩色文字墙
01-31
在canvas上 画出大小不同，颜色不同的指定的文字 目的是铺满这个屏幕 可以用于做罗列关键字的背景 同时，给鼠标移动添加事件，当鼠标移动，会画出一系列渐渐变大的圈圈
html,js炫彩时钟
123456
04-06 864
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; body{ height: 100%; background-color: black;
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...
html炫彩粒子的代码,HTML5 Canvas炫彩粒子特效生成器
weixin_33121345的博客
06-07 1041
JavaScript语言：JaveScriptBabelCoffeeScript确定const tau = 2 * Math.PIconst { random } = _const { abs, max, sin, cos } = Math// a collection of Vector methodsclass Vector {constructor (x = 0, y = 0) {this....
教你如何用canvas绘制炫彩小球
weixin_50166066的博客
07-21 562
先弄一个画布 <canvas id="myCanvas" width="800" height="600"></canvas> 为了效果直观一点，我们设置了一点样式 canvas { border: 1px solid #000; background-color: #ccc; } 然后重点就在js方面了 // 得到画布 var canvas = document.getElementById("myCan
炫彩登陆界面欣赏
❤feeling - 一路走来
08-08 354
步骤我就不一一写出来了如果有兴趣的童鞋可以联系我，如果有童鞋需要源文件的话也可以联系我哈！但是不能用作商业盈利用途哦~~~
扫描全能王1.1.3 （MAC版本）
最新发布
09-20
cam scanner,一般又称扫描全能王,Cam Scanner。 扫描全能王(CamScanner),全球智能扫描引领者。扫描全能王是一款集文件扫描、图片文字提取识别、PDF 内容编辑、PDF 分割合并、PDF 转 Word等功能
HTML5 Canvas 实例：动态数字时钟代码详解
这个实例展示了HTML5 Canvas的强大之处，即能够在浏览器上动态地创建和更新图形，这对于开发实时交互式的网站元素非常有用，比如计时器、游戏等。学习者可以通过这个实例了解如何结合HTML5和JavaScript实现复杂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值