用canvas的arc绘制时钟

Posted 2020-08-21 雨水一盒

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绘制时钟的主要内容，如果未能解决你的问题，请参考以下文章