HTML5 Game - Canvas Animation Clock Ticking

Animating a clock

The following code create an animated clock.
Demo

<!DOCTYPE HTML>
<html>

<head>
    <script>
        class MyObject {//from   w  w w . j  av a  2  s . c  o  m
            draw(animationController) {
                let canvas = animationController.getCanvas();
                let context = animationController.getContext();
                // update

                let date = new Date();
                let hours = date.getHours();
                let minutes = date.getMinutes();
                let seconds = date.getSeconds();

                hours = hours > 12 ? hours - 12 : hours;

                let hour = hours + minutes / 60;
                let minute = minutes + seconds / 60;

                animationController.clear();
                context.save();
                context.translate(canvas.width / 2, canvas.height / 2);

                // draw clock body
                context.beginPath();
                context.arc(0, 0, this.clockRadius, 0, Math.PI * 2, true);

                // draw numbers   
                context.textAlign = "center";
                context.textBaseline = "middle";
                for (let n = 1; n <= 12; n++) {
                    let theta = (n - 3) * (Math.PI * 2) / 12;
                    let x = this.clockRadius * 0.8 * Math.cos(theta);
                    let y = this.clockRadius * 0.8 * Math.sin(theta);
                    context.fillText(n, x, y);
                }

                context.save();

                // draw clock rim
                context.strokeStyle = "#005EA8";
                context.stroke();

                context.restore();

                // draw hour hand
                context.save();
                let theta = (hour - 3) * 2 * Math.PI / 12;
                context.rotate(theta);
                context.beginPath();
                context.moveTo(-10, -4);
                context.lineTo(-10, 4);
                context.lineTo(this.clockRadius * 0.6, 1);
                context.lineTo(this.clockRadius * 0.6, -1);
                context.fill();
                context.restore();

                // minute hand
                context.save();
                theta = (minute - 15) * 2 * Math.PI / 60;
                context.rotate(theta);
                context.beginPath();
                context.moveTo(-10, -3);
                context.lineTo(-10, 3);
                context.lineTo(this.clockRadius * 0.9, 1);
                context.lineTo(this.clockRadius * 0.9, -1);
                context.fill();
                context.restore();

                // second hand
                context.save();
                theta = (seconds - 15) * 2 * Math.PI / 60;
                context.rotate(theta);
                context.beginPath();
                context.moveTo(-10, -2);
                context.lineTo(-10, 2);
                context.lineTo(this.clockRadius * 0.8, 1);
                context.lineTo(this.clockRadius * 0.8, -1);
                context.fillStyle = "blue";
                context.fill();
                context.restore();

                context.restore();


            }
            constructor() {
                this.clockRadius = 75;
            }
        }
        class MyAnimation {
            constructor(canvasId) {
                this.canvas = document.getElementById(canvasId);
                this.context = this.canvas.getContext("2d");
                this.t = 0;
                this.timeInterval = 0;
                this.startTime = 0;
                this.lastTime = 0;
                this.frame = 0;
                this.animating = false;

                window.requestAnimFrame = (function(callback) {
                    return window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||
                        function(callback) {
                            window.setTimeout(callback, 1000 / 60);
                        };
                })();
            }
            getContext() {
                return this.context;
            };

            getCanvas() {
                return this.canvas;
            };

            clear() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            };

            setDrawStage(func) {
                this.drawStage = func;
            };

            isAnimating = function() {
                return this.animating;
            };

            getFrame() {
                return this.frame;
            };

            start() {
                this.animating = true;
                let date = new Date();
                this.startTime = date.getTime();
                this.lastTime = this.startTime;

                if (this.drawStage !== undefined) {
                    this.drawStage();
                }

                this.animationLoop();
            };

            stop() {
                this.animating = false;
            };

            getTimeInterval() {
                return this.timeInterval;
            };

            getTime() {
                return this.t;
            };

            getFps() {
                return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
            };

            animationLoop() {
                let that = this;

                this.frame++;
                let date = new Date();
                let thisTime = date.getTime();
                this.timeInterval = thisTime - this.lastTime;
                this.t += this.timeInterval;
                this.lastTime = thisTime;

                if (this.drawStage !== undefined) {
                    this.drawStage();
                }

                if (this.animating) {
                    requestAnimFrame(function() {
                        that.animationLoop();
                    });
                }
            }
        }
        window.onload = function() {
            let myAnimation = new MyAnimation("myCanvas");
            let canvas = myAnimation.getCanvas();
            let context = myAnimation.getContext();

            let my = new MyObject();
            myAnimation.setDrawStage(function() {
                my.draw(myAnimation);
            });


            myAnimation.start();
        };
    </script>
</head>

<body>
    <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
    </canvas>
</body>

</html>
HTML5 Game - Canvas Animation Clock Ticking

Animating a clock

Demo

Related Topics
