This is the fourth day of my participation in the August Text Challenge.More challenges in August

Animation is composed of a number of consecutive pictures. Switching different pictures in sequence gives people a feeling of animation. The faster the switching speed is, the more real the animation will feel. In fact, the animation in canvas performs the operation of erasing and drawing in a loop, and generally saves the environment before operation and restores the environment after operation. Animation using Canvas consists of two key points: looping and drawing the picture each time it is displayed. There are two main ways to execute a loop. One is to use the setInterval or setTimeout methods we learned earlier. The other option is to call the newly added requestAnimationFrame method for animation, which does not need to set the interval and simply writes the processing logic to the parameter’s callback function. But requeseAnimationFram itself needs to be put into the callback function, and its startup operation can be cancelled with the cancelAnimationFrame method.

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <canvas id='c2d'>Browsers do not support Canvas</canvas>
    <script>
        const canvas = document.getElementById('c2d');
        if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            function draw(){
                var date = new Date(a); h = date.getHours(); m = date.getMinutes(); s = date.getSeconds(); dot = s %2 ? "": ":";

                var dateStr = h + dot + m + dot + s;

                ctx.save();
                ctx.clearRect(0.0.300.300);
                ctx.fillStyle="red";
                ctx.font = "37px Times New Roman";
                ctx.fillText(dateStr, 30.50);
                ctx.restore();
                window.requestAnimationFrame(draw);
            }

            draw();
        }
    </script>
</body>
</html>
Copy the code

If my blog is helpful to you, if you like my blog content, please “like” “comment” “favorites” one key three even oh! I heard that the people who like 👉 👈 will not be too bad, every day will be full of vitality oh hey hey!! ❤️ ❤️ ❤️ Everyone’s support is my motivation to keep going. Don’t forget to follow 👉 👈 after you like me!

Personal wechat: iotzzh Public account: front-end wechat personal website: www.iotzzh.com