I drew an animated clock with canvas!

I haven't practiced every day for several days. Besides the reasons for my work, I have recently seen the resumes of my colleagues'new students and younger sisters who have just entered the workplace, which have been stimulated by the skills they have mastered. Although it may not be so complete, but the real push himself, decided to gnaw down the canvas first.

I tried to draw a clock, which is slightly different from the MDN example. I work it by myself!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
<script>
    function init(){
        var ctx = document.getElementById('canvas').getContext('2d');

        ctx.save();
        ctx.clearRect(0,0,300,300);
        ctx.translate(150,150);
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#a77";
        ctx.beginPath();
        ctx.arc(0,0,100,0,Math.PI*2,true);
        ctx.stroke();
        ctx.rotate(-Math.PI/2);

        //minute mark
        ctx.save();
        for(var i = 0;i<60;i++){
            if(i%5 != 0){
                ctx.beginPath();
                ctx.moveTo(90,0);
                ctx.lineTo(94,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);
        }
        ctx.restore();

        //hour mark
        ctx.save();
        for(var i=1;i<=12;i++){
            ctx.beginPath();
            ctx.moveTo(85,0);
            ctx.lineTo(95,0);
            ctx.stroke();
            ctx.rotate(Math.PI/6);
        }
        ctx.restore();
        window.requestAnimationFrame(clock);
    }

    function clock() {
        var ctx = document.getElementById('canvas').getContext('2d');
        var now = new Date();
        var sec = now.getSeconds();
        var min = now.getMinutes();
        var hr = now.getHours();
        hr = hr>=12 ? hr-12 : hr;

        ctx.beginPath();
        ctx.arc(0,0,82,0,Math.PI*2,false);
        ctx.clip();
        ctx.clearRect(-90,-90,180,180);

        //write hour
        ctx.save();
        ctx.lineWidth = 6;
        ctx.rotate(hr*Math.PI/6 + min*Math.PI/360 + sec*Math.PI/21600);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(50,0);
        ctx.stroke();
        ctx.restore();

        //write minute
        ctx.save();
        ctx.lineWidth = 3;
        ctx.rotate(min*Math.PI/30 + sec*Math.PI/1800);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(65,0);
        ctx.stroke();
        ctx.restore();

        //write second
        ctx.save();
        ctx.lineWidth = 1;
        ctx.rotate(sec*Math.PI/30);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(80,0);
        ctx.stroke();
        ctx.restore();

        window.requestAnimationFrame(clock);
    }

    init();
</script>
</body>
</html>

Here is an example page of MDN: Order me

Unlike the MDN example, MDN has to redraw the entire clock every time, and my approach is to separate the clock dial from the three pointers, just redraw the pointer.

I think there are two difficulties here: one is calculating the angle of the minute hand (while the minute hand goes, the hour hand also takes some angles). One is to redraw the area of the pointer.

canvasRendingContext2D.rotate(angle)

Here Math.PI is a semicircle, and the semicircle has six hours, so Math.PI/6 is the radian of an hour hand.

Because the minute turns once and the hour hand completes one-twelve cycles, the radian for minute can be calculated as follows: Math.PI*2/60*12=>Math.PI/360.

The second hand is the same.

Second, redraw the pointer.

If you don't redraw the pointer, you'll get a clock full of 360 degrees seconds in a minute. Like this:

So how can we redraw the area of the pointer section?

I think about tailoring. Then redraw in the clipped area.

That's OK! (La la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la la

Keywords: Javascript

Added by sanlove on Sat, 15 Jun 2019 23:25:34 +0300

Programming VIP

I drew an animated clock with canvas!

Popular Keywords