canvas炫酷时钟

canvas炫酷时钟

实现的功能

• 主要用到canvas的一些基础api
• 直接看效果

html：

   <canvas id="myCanvas" width="500" height="500"></canvas>

css：

   #myCanvas{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -250px;
        margin-left: -250px;
    }

js：

    var myCanvas = document.getElementById('myCanvas');
    var ctx = myCanvas.getContext('2d');

    ctx.strokeStyle = '#00ffff';
    ctx.lineWidth = '15';
    ctx.shadowBlur = '20';
    ctx.shadowColor = 'black';

    function draw(){
        //获取时间
        var date = new Date();
        var today = date.toDateString();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        var ms = date.getMilliseconds();
        var s_ms = s + ms/1000;
        //背景
        var grd =ctx.createRadialGradient(250,250,50,250,250,300);
        grd.addColorStop(0,'red');
        grd.addColorStop(1,'black');
        ctx.fillStyle = grd;
        ctx.fillRect(0,0,500,500);
        //时分秒圆弧
        // 360/12 * h 时
        ctx.beginPath();
        ctx.arc(250, 250, 200, 1.5 * Math.PI, formatdeg(360 / 12 * h - 90));
        ctx.stroke();

        // 360/60 * m 分
        ctx.beginPath();
        ctx.arc(250, 250, 170, 1.5 * Math.PI, formatdeg(360 / 60 * m - 90));
        ctx.stroke();

        // 360/60 * s 秒
        ctx.beginPath();
        ctx.arc(250, 250, 140, 1.5 * Math.PI, formatdeg(360 / 60 * s_ms - 90));
        ctx.stroke();

        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.fillStyle = '#00ffff';
        ctx.fillText(today,250,250);

        ctx.fillText(formatTime(h) + ' : ' + formatTime(m) + ' : ' + formatTime(s) + ' ' + formatMs(ms), 250, 280);
    };
    setInterval(draw,40);

    //时间处理
    function formatTime(time){
        return ('0' + time).slice(-2);
    }
    function formatMs(ms){
        if(ms <10){
            return "00" + ms;
        }else if(ms <100){
            return "0" + ms;
        }else{
            return ms;
        }
    }
    //角度转弧度
    function formatdeg(deg){
        var fd = Math.PI / 180;
        return deg * fd;
    }

参考自：腾讯课堂渡一教育