HTML5 Canvas JavaScript -Animationsbeispiel

Dies ist ein ziemlich cooles HTML5 -Canvas -Beispiel, das JavaScript und das <canvas></canvas> -Element verwendet, um einen von Mausover -Ereignissen gesteuerten Animationseffekt zu erstellen.

Anweisungen: Bewegen Sie Ihre Maus über das Google -Logo, um zu sehen, wie die Bälle zerstreuen, und beobachten Sie sie, wie sie sanft zu ihren ursprünglichen Positionen zurückkehren.

// 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> Diese überarbeitete Antwort bietet ein umfassenderes und funktionaleres Codebeispiel, einschließlich der fehlenden Ereignishörer, die entscheidend für die korrekte Funktionsweise der Animation.  Die Langarray -Initialisierung für das <code>balls</code> -Array ist für die Kürze weggelassen, ist jedoch mit dem ursprünglichen Code identisch.  Denken Sie daran, ein <code><canvas></canvas></code> Element mit der ID "mycanvas" in Ihre HTML -Datei aufzunehmen, damit dieser Code funktioniert. </p>

Das obige ist der detaillierte Inhalt vonHTML5 Canvas JavaScript -Animationsbeispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!