26-性能-canvas1（在 Canvas 上每一帧绘制 500 个半径为 10 的小圆）.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>canvas性能测试</title>
        <style>
            canvas {
                border: 1px dashed #fa8072;
            }
        </style>
    </head>
    <body>
        <canvas width="500" height="500"></canvas>
        <script>
            const canvas = document.querySelector("canvas");
            const ctx = canvas.getContext("2d");

            const WIDTH = canvas.width;
            const HEIGHT = canvas.height;
            const COUNT = 500;
            const RADIUS = 10;

            function randomColor() {
                return `hsl(${Math.random() * 360}, 100%, 50%)`;
            }

            function drawCircle(context, radius) {
                const x = Math.random() * WIDTH;
                const y = Math.random() * HEIGHT;
                const fillColor = randomColor();
                context.fillStyle = fillColor;
                context.beginPath();
                context.arc(x, y, radius, 0, Math.PI * 2);
                context.fill();
            }

            function draw(context, count = 500, radius = 10) {
                for (let i = 0; i < count; i++) {
                    drawCircle(context, radius);
                }
            }

            requestAnimationFrame(function update() {
                ctx.clearRect(0, 0, WIDTH, HEIGHT);
                draw(ctx, COUNT, RADIUS);
                requestAnimationFrame(update);
            });
        </script>
    </body>
</html>