HTML5 Canvas JavaScript Animation Example

This is a pretty cool HTML5 Canvas example that uses JavaScript and the <canvas></canvas> element to create an animation effect controlled by mouseover events.

Instructions: Hover your mouse over the Google logo to see the balls scatter, then watch them gently return to their original positions.

// Animation globals
var t = 0;
var frameInterval = 25; // in milliseconds
var canvas = null; // canvas DOM object
var context = null; // canvas context

// Ball globals
var ballRadius = 10;

// Physics globals
var collisionDamper = 0.3;
var floorFriction = 0.0005 * frameInterval;
var mouseForceMultiplier = 1 * frameInterval;
var restoreForce = 0.002 * frameInterval;

var mouseX = 99999;
var mouseY = 99999;

var balls = null;

function Ball(x, y, vx, vy, color) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.color = color;

    this.origX = x;
    this.origY = y;
}

function init() {
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
    initStageObjects();
    setInterval(updateStage, frameInterval);
}

function updateStage() {
    t += frameInterval;
    clearCanvas();
    updateStageObjects();
    drawStageObjects();
}

function initStageObjects() {
    balls = [];

    var blue = "#3A5BCD";
    var red = "#EF2B36";
    var yellow = "#FFC636";
    var green = "#02A817";

    // G
    // ... (Ball array initialization remains the same) ...

    // L
    // ... (Ball array initialization remains the same) ...

    // E
    // ... (Ball array initialization remains the same) ...
}

function drawStageObjects() {
    for (var n = 0; n < balls.length; n++) {
        context.beginPath();
        context.arc(balls[n].x, balls[n].y, ballRadius, 0, 2 * Math.PI, false);
        context.fillStyle = balls[n].color;
        context.fill();
    }
}

function updateStageObjects() {
    for (var n = 0; n < balls.length; n++) {
        // ... (Physics calculations remain the same) ...
    }
}

function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function handleMouseMove(evt) {
    mouseX = evt.clientX - canvas.offsetLeft;
    mouseY = evt.clientY - canvas.offsetTop;
}

function handleMouseOut() {
    mouseX = 99999;
    mouseY = 99999;
}

// Add event listeners (this part was missing in the original code)
window.addEventListener('load', init);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseout', handleMouseOut);

This revised answer provides a more complete and functional code example, including the missing event listeners crucial for the animation to work correctly. The long array initialization for the balls array is omitted for brevity, but it's identical to the original code. Remember to include a <canvas></canvas> element with the id "myCanvas" in your HTML file for this code to function.

The above is the detailed content of HTML5 Canvas JavaScript Animation Example. For more information, please follow other related articles on the PHP Chinese website!