Using Raphael to create a simple clock

Keywords: Javascript IE

The outer black arc represents the hour hand, the middle represents the minute hand, and the inner represents the second hand.
We need to work out how many arc lengths we need to draw according to the time we have. The three arcs are just radii and have different colors. We need to encapsulate a function, and then execute this function once a second to draw the arc. The previous article has said the arc drawing operation. path of svg , no more nagging here.
This is mainly to solve the problem that if you draw every second, there will be a lot of path stacks. It is impossible to draw like this. How to create a picture for the first time, and only modify the data instead of drawing later?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="garage/raphael-master/raphael.js"></script>
    <style>
        body {
            background: rgb(236, 198, 29);
        }
    </style>
    <script>
        window.onload = function () {
            let paper = Raphael(0, 0, 800, 600);
            let cx = 400, cy = 300;

            function createPath(r, ang, color) {
                let path = paper.path();
                path.attr({
                    'stroke-width': 20,
                    'stroke': color
                })
                calc(ang, true);

                function calc(ang, isFirst = false) {//Computational arcs
                    let arr = [];
                    arr.push(`M ${cx} ${cy - r}`);
                    let x = cx + Math.sin(ang * Math.PI / 180) * r;
                    let y = cy - Math.cos(ang * Math.PI / 180) * r;
                    arr.push(`A ${r} ${r} 0 ${ang > 180 ? 1 : 0} 1 ${x} ${y}`);

                    if (isFirst) {
                        path.attr('path', arr.join(' '));
                    } else {
                        if (ang == 0) {
                            path.attr('path', arr.join(' '));
                        } else {
                            path.animate({ path: arr.join(' ') }, 500, 'bounce');
                        }
                    }
                }
                path.calc = calc;//This method is to modify the data after subsequent drawing.
                return path;
            }
            //This part is to make the path not to be created repeatedly. It is created for the first time and only needs to be modified later.
            let paths = []
            function tick() {
                let oDate = new Date();
                let hours = oDate.getHours() > 12 ? oDate.getHours() % 12 : oDate.getHours();//If the clock reaches 13 o'clock, set it to 1 o'clock
                if (paths.length == 0) {
                    paths = [
                        createPath(200, 360 * hours / 12, 'rgb(54, 54, 54)'),
                        createPath(150, 360 * oDate.getMinutes() / 60, 'orange'),
                        createPath(100, 360 * oDate.getSeconds() / 60, 'white')
                    ]
                } else {
                    paths[0].calc(360 * hours / 12);
                    paths[1].calc(360 * oDate.getMinutes() / 60);
                    paths[2].calc(360 * oDate.getSeconds() / 60);
                }
            }
            tick();//Perform one initialization first
            setInterval(tick, 1000)

        }
    </script>
</head>
<body>
</body>
</html>

Posted by haixiao on Wed, 23 Oct 2019 07:18:04 -0700

Programmer Group

Using Raphael to create a simple clock

Hot Keywords