Contoh Animasi HTML5 Canvas JavaScript

Ini adalah contoh kanvas HTML5 yang cantik yang menggunakan elemen JavaScript dan <canvas></canvas> untuk membuat kesan animasi yang dikawal oleh peristiwa Mouseover.

Arahan:

Hover tetikus anda ke atas logo Google untuk melihat bola berselerak, kemudian menonton mereka perlahan -lahan kembali ke kedudukan asal mereka.

Jawapan yang disemak ini memberikan contoh kod yang lebih lengkap dan berfungsi, termasuk pendengar acara yang hilang penting untuk animasi berfungsi dengan betul. Inisialisasi array yang panjang untuk array

// 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);

ditinggalkan untuk keringkasan, tetapi ia sama dengan kod asal. Ingatlah untuk memasukkan elemen

dengan id "mycanvas" dalam fail html anda untuk kod ini berfungsi. balls

Atas ialah kandungan terperinci Contoh Animasi HTML5 Canvas JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!