使用canvas实现数字时钟效果

<canvas id="canvas"></canvas>

<script>
    (function(){

        var 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,1,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,0,0,0,0,0],
                    [0,0,0,0,0,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,1,1,1,0,0],
                    [0,0,0,0,0,0,0]
                ]//:
            ];

        var canvas = document.getElementById(‘canvas‘);
        //声明canvas的宽高
        var H = 30,W = 300;
        canvas.height = H;
        canvas.width = W;
        if(canvas.getContext){
            var cxt = canvas.getContext(‘2d‘);
        }
        cxt.fillStyle = ‘#f00‘;
        cxt.fillRect(10,10,50,50);
        cxt.strokeStyle = "#0f0"

        //存储时间数据
        var data = [];
        //存储运动的小球
        var balls = [];
        //设置粒子半径
        var R = canvas.height/20-1;
        (function(){
            var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
            //存储时间数字,由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
            data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        })();

        /*生成点阵数字*/
        function renderDigit(index,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){
                        cxt.beginPath();
                        cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                        cxt.closePath();
                        cxt.fill();
                    }
                }
            }
        }

        /*更新时钟*/
        function updateDigitTime(){
            var changeNumArray = [];
            var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
            var NewData = [];
            NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
            for(var i = data.length-1; i >=0 ; i--){
                //时间发生变化
                if(NewData[i] !== data[i]){
                    //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                    changeNumArray.push(i+‘_‘+(Number(data[i])+1)%10);
                }
            }
            //增加小球
            for(var i = 0; i< changeNumArray.length; i++){
                addBalls.apply(this,changeNumArray[i].split(‘_‘));
            }
            data = NewData.concat();
        }

        /*更新小球状态*/
        function updateBalls(){
            for(var i = 0; i < balls.length; i++){
                balls[i].stepY += balls[i].disY;
                balls[i].x += balls[i].stepX;
                balls[i].y += balls[i].stepY;
                if(balls[i].x > W + R || balls[i].y > H + R){
                    balls.splice(i,1);
                    i--;
                }
            }
        }

        /*增加要运动的小球*/
        function addBalls(index,num){
            var numArray = [1,2,3];
            var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
            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 ball = {
                            x:14*(R+2)*index + j*2*(R+1)+(R+1),
                            y:i*2*(R+1)+(R+1),
                            stepX:Math.floor(Math.random() * 4 -2),
                            stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                            color:colorArray[Math.floor(Math.random()*colorArray.length)],
                            disY:1
                        };
                        balls.push(ball);
                    }
                }
            }
        }

        /*渲染*/
        function render(){
            //重置画布宽度,达到清空画布的效果
            canvas.height = 100;
            //渲染时钟
            for(var i = 0; i < data.length; i++){
                renderDigit(i,data[i]);
            }
            //渲染小球
            for(var i = 0; i < balls.length; i++){
                cxt.beginPath();
                cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
                cxt.fillStyle = balls[i].color;
                cxt.closePath();
                cxt.fill();
            }
        }

        clearInterval(oTimer);
        var oTimer = setInterval(function(){
            //更新时钟
            updateDigitTime();
            //更新小球状态
            updateBalls();
            //渲染
            render();
        },50);

    })();

</script>
时间: 2024-10-14 10:50:44

使用canvas实现数字时钟效果的相关文章

canvas实现的时钟效果

最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之间就是360/12=30度,所以我在圆上画出数字的代码是这样的: drawNumber:function(){ this.context.save(); for(var i = 0;i < 12; i++){ var angle = i*30; angle = angle*Math.PI/180;

JS框架_(Vue.js)带有星期日期的数字时钟

数字时钟效果: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue.js带有星期日期的数字时钟代码</title> <style> html, body { height: 100%; } body { background:#C7C7C7; } p { margin: 0; padding: 0; } #clock { fon

JS — 实现简单的数字时钟

js实现简单的数字时钟 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS — 实现简单的数字时钟效果</title> 6 <link rel="stylesheet" type="text/css" href=""> 7 </head>

js实现动态数字时钟

1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS — 实现简单的数字时钟效果</title> <link rel="stylesheet" type="text/css" href=""> </head> <body&g

JS制作一个创意数字时钟

通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模型,从特殊到一般. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>cnblog头部轮播图</title&

Css3+jQuery打造的一款带动画效果的数字时钟

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Css3+jQuery打造的一款带动画效果的数字时钟丨任E行F9行车记录仪|gopro官网|电影院座椅|</title> <style type="text/css&quo

【canvas】绘制一个数字时钟

使用canvas绘制一个数字时钟 基础内容 下面是此案例中会使用到的一些绘图API //获取绘图上下文 var ctx = canvas.getContext('2d'); //绘制直线 ctx.moveTo(100, 100); ctx.lineTo(700, 700); //绘制曲线 ctx.arc( centerx, centery, radius, //圆心的坐标以及半径的值 startingAngle,endingAngle, //从哪个弧度制开始到那个弧度值结束 anticlockw

[Java项目01][数字时钟]

我从2016年3月份开始学Java,看的是某宝得来的视频,目前Java SE还没学完. 前几天手痒在网上搜Java小项目,看到Youtube上的歪果仁们做的Java数字时钟,非常简单,适合我这样的新手,于是也做了一份. 效果大概是是这样的: 源代码传到了GitHub上: https://github.com/jpch89/Digital-Clock 另外还录了份视频,免得以后自己忘了怎么做,传到了Vimeo上: https://vimeo.com/159116313 参考资料如下: 1. Cre

Qt仿Android带特效的数字时钟源码分析(滑动,翻页,旋转效果)

这个数字时钟的源码可以在Qt Demo中找到,风格是仿Android的,不过该Demo中含有三种动画效果(鉴于本人未曾用过Android的系统,因此不知道Android的数字时钟是否也含有这三种效果),其分别为滑动.翻页和旋转. 由于本人的Qt Creator输入中文后显示的都是乱码,因而在此只能使用英文进行注释,后期如果有时间再进行中文的相关整理.可能有些地方理解并不是很正确.希望大家多多指正! 以下为源码: [cpp] view plaincopy #include <QtCore> #i