当前位置： 移动技术网 > IT编程>网页制作>Html5 > canvas炫酷时钟

canvas炫酷时钟

2019年05月08日  | 移动技术网IT编程  | 我要评论

canvas炫酷时钟

实现的功能

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

alt

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网