用canvas的arc绘制时钟

Posted 雨水一盒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用canvas的arc绘制时钟相关的知识,希望对你有一定的参考价值。

在页面上加入canvas标签:

<body>
<canvas id="c1"  width="600px" height="600px"> 
    <span>不支持canvas浏览器</span>
</canvas> <!--默认:宽300 高150-->
</body>

js部分:

绘制秒的刻度的思路是先用oGC.stroke()循环画60个6°的扇形,将它们拼接成一整个圆,然后用oGC.fill()画一个实心的圆,半径比之前拼接的那个圆短,用实心的圆挡住中间多余的线,这样秒的刻度就画出来了,以此类推可以画出分的刻度;

让时钟自动走起来:获取new Date()下的真实时、分、秒时间,然后用‘角度*Math.PI/180=弧度’的公式换算成弧度,赋值给时针、分针、秒针的圆中对应的弧度值,注意:弧度的变化是沿着顺时针的方向增加的,也就是在秒针指向0秒时,它的弧度是-90°。最后设置一个定时器,每隔1s调用一次封装的函数:

<script>
window.onload = function(){
    var oC = document.getElementById(‘c1‘);
    var oGC = oC.getContext(‘2d‘);  

    function toDraw(){
        var a = 200;
        var b = 200;
        var r = 100;

        oGC.clearRect(0,0,oC.width,oC.height);

        //获取时间
        var oDate = new Date();
        var oHour = oDate.getHours();
        var oMin = oDate.getMinutes();
        var oSec = oDate.getSeconds();

        var oHourvalue = (-90 + oHour*30 + oMin/2 )*Math.PI/180;
        var oMinvalue = (-90 + oMin*6 )*Math.PI/180;
        var oSecvalue = (-90 + oSec*6 )*Math.PI/180;

        //绘制秒的刻度
        oGC.beginPath();
        for(var i=0;i<60;i++){
            oGC.moveTo(a,b);
            oGC.arc(a,b,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();

        oGC.fillStyle = ‘white‘;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*19/20,0,360*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();


        //绘制分的刻度
        oGC.lineWidth = 3;
        oGC.beginPath();
        for(var i=0;i<12;i++){
            oGC.moveTo(a,b);
            oGC.arc(a,b,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
        }
        oGC.closePath();
        oGC.stroke();

        oGC.fillStyle = ‘white‘;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*17/20,0,360*Math.PI/180,false);
        oGC.closePath();
        oGC.fill();

        //绘制时针
        oGC.lineWidth = 4;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*13/20,oHourvalue,oHourvalue,false);
        oGC.closePath();
        oGC.stroke();

        //绘制分针
        oGC.lineWidth = 2;
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*18/20,oMinvalue,oMinvalue,false);
        oGC.closePath();
        oGC.stroke();

        //绘制秒针
        oGC.beginPath();
        oGC.moveTo(a,b);
        oGC.arc(a,b,r*19/20,oSecvalue,oSecvalue,false);
        oGC.closePath();
        oGC.stroke();
    };
    setInterval(toDraw,1000);
};
</script>

 

以上是关于用canvas的arc绘制时钟的主要内容,如果未能解决你的问题,请参考以下文章

canvas绘制一个数字时钟

H5之canvas-绘制动态时钟

小任务之Canvas绘制时钟

Canvas绘制时钟

用canvas绘制一个简易时钟

使用Canvas绘制简单的时钟控件