Exemple d'animation JavaScript en toile HTML5

Il s'agit d'un exemple de canevas HTML5 assez cool qui utilise JavaScript et l'élément <canvas></canvas> pour créer un effet d'animation contrôlé par les événements de Mouseover.

Instructions: Faire passer votre souris sur le logo Google pour voir les balles dispersées, puis les regarder revenir doucement à leurs positions d'origine.

// 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 
<p> Cette réponse révisée fournit un exemple de code plus complet et fonctionnel, y compris les écouteurs d'événements manquants cruciaux pour que l'animation fonctionne correctement.  L'initialisation du tableau long pour le tableau <code>balls</code> est omise par la brièveté, mais elle est identique au code d'origine.  N'oubliez pas d'inclure un élément <code><canvas></canvas></code> avec l'ID "MyCanvas" dans votre fichier HTML pour que ce code fonctionne. </p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!