How to create an HTML5 canvas animation

要创建HTML5 canvas动画，需先设置canvas元素并获取2D上下文，然后使用requestAnimationFrame循环更新画面；例如绘制一个移动的蓝色圆形，通过不断清除画布并重绘其新位置实现动画效果，添加边界检测可让圆形碰到边缘时反弹，结合变量更新与绘图步骤即可实现流畅运动，最终可通过对象数组扩展为多个动画元素，整个过程依赖逐帧重绘和状态更新来模拟动态视觉效果。

Creating an HTML5 canvas animation is straightforward once you understand the basics of the <canvas> element and JavaScript’s role in drawing and updating visuals over time. Here’s how to build a simple animation — like a moving circle — step by step.

Set up the canvas element

Start by adding a <canvas> element to your HTML file. Give it an id so you can reference it in JavaScript, and set width and height attributes.

<canvas id="myCanvas" width="800" height="400"></canvas>

You can style it with CSS if needed, but the actual drawing happens in JavaScript.

Get the canvas context

Inside a script tag or external JS file, get the 2D rendering context. This object provides methods and properties to draw and animate shapes.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Create a simple animation loop

Animations on canvas work by repeatedly clearing the canvas and redrawing elements in slightly different positions. Use requestAnimationFrame() to create a smooth, efficient loop.

function animate() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw your frame (example: a moving circle)
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();

    // Update position
    x += dx;
    y += dy;

    // Loop the animation
    requestAnimationFrame(animate);
}

// Initial position and movement
let x = 50;
let y = 50;
let dx = 3;
let dy = 2;
let radius = 20;

// Start the animation
animate();

This code moves a blue circle across the canvas. When it hits the edges, it will keep going off-screen unless you add boundary checks.

Add collision detection (optional)

To make the circle bounce off the walls, check its position against the canvas edges:

if (x + radius > canvas.width || x - radius < 0) {
    dx = -dx; // Reverse horizontal direction
}
if (y + radius > canvas.height || y - radius < 0) {
    dy = -dy; // Reverse vertical direction
}

Place this inside the animate() function before calling requestAnimationFrame.

Key tips for better canvas animations

• Use requestAnimationFrame instead of setInterval – It syncs with the screen’s refresh rate for smoother performance.
• Always clear the canvas – Use clearRect() at the start of each frame unless you want trailing effects.
• Keep drawing code inside the animation loop – Anything you want to move or change must be redrawn each frame.
• Separate logic from drawing – Update positions and states first, then draw.
• Control speed with delta timing – For more advanced control, factor in time between frames to keep motion consistent across devices.

For example, you could expand this to animate multiple objects by storing them in an array:

const balls = [];

for (let i = 0; i < 5; i++) {
    balls.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        dx: Math.random() * 5 - 2.5,
        dy: Math.random() * 5 - 2.5,
        radius: Math.random() * 20 + 10,
        color: `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
    });
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    balls.forEach(ball => {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = ball.color;
        ctx.fill();
        ctx.closePath();

        // Update position
        ball.x += ball.dx;
        ball.y += ball.dy;

        // Bounce off walls
        if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
            ball.dx = -ball.dx;
        }
        if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
            ball.dy = -ball.dy;
        }
    });

    requestAnimationFrame(animate);
}

animate();

Basically, that’s all you need to get started. Once you understand the animation loop and how to manipulate shapes over time, you can build anything from simple bouncing balls to games or data visualizations. The key is redrawing everything each frame and updating just enough to create the illusion of motion.

The above is the detailed content of How to create an HTML5 canvas animation. For more information, please follow other related articles on the PHP Chinese website!