HTML5帆布JavaScript動畫示例

這是一個非常酷的HTML5畫布示例，它使用JavaScript和<canvas></canvas>>元素來創建由MouseOver Events控制的動畫效應。

>

>>指令：>將鼠標懸停在Google徽標上以查看球的散射，然後輕輕地觀看它們。

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

這個修訂後的答案提供了一個更完整和功能的代碼示例，包括缺少的事件偵聽器對動畫的正確工作至關重要。 對於簡短而言，省略了數組的長數組初始化，但與原始代碼相同。 切記在HTML文件中以此代碼功能中包含a

元素，並在HTML文件中使用ID“ mycanvas”。 balls>

以上是HTML5帆布JavaScript動畫示例的詳細內容。更多資訊請關注PHP中文網其他相關文章！