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;

    }

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

巴特西

canvas炫酷时钟

canvas炫酷时钟

实现的功能

html：

css：

js：

最新文章

热门文章