一、Canvas核心渲染技术

现代Web动画的Canvas基础架构：

<canvas id="gameCanvas" width="800" height="600"></canvas>

<script>
// 初始化Canvas
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 动画循环基础框架
function gameLoop() {
    // 1. 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 2. 更新状态
    updateGameState();
    
    // 3. 渲染画面
    renderScene();
    
    // 4. 继续循环
    requestAnimationFrame(gameLoop);
}

// 启动动画
requestAnimationFrame(gameLoop);
</script>

四大核心：状态管理、分层渲染、帧率控制、性能优化

二、高级粒子系统实现

class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 5 + 1;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }
    
    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.size > 0.2) this.size -= 0.1;
    }
    
    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

const particles = [];

function createParticles(x, y, count) {
    for (let i = 0; i < count; i++) {
        particles.push(new Particle(x, y));
    }
}

function handleParticles() {
    for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();
        
        // 移除消失的粒子
        if (particles[i].size <= 0.2) {
            particles.splice(i, 1);
            i--;
        }
    }
}

三、游戏开发实战技巧

class Sprite {
    constructor(image, frameWidth, frameHeight) {
        this.image = image;
        this.frameWidth = frameWidth;
        this.frameHeight = frameHeight;
        this.currentFrame = 0;
        this.frameCount = image.width / frameWidth;
        this.animationSpeed = 0.1;
    }
    
    update() {
        this.currentFrame += this.animationSpeed;
        if (this.currentFrame >= this.frameCount) {
            this.currentFrame = 0;
        }
    }
    
    draw(x, y) {
        const frameX = Math.floor(this.currentFrame) * this.frameWidth;
        ctx.drawImage(
            this.image,
            frameX, 0, this.frameWidth, this.frameHeight,
            x, y, this.frameWidth, this.frameHeight
        );
    }
}

// 矩形碰撞检测
function checkCollision(rect1, rect2) {
    return (
        rect1.x  rect2.x &&
        rect1.y  rect2.y
    );
}

// 基于网格的空间分区优化
const gridSize = 100;
const collisionGrid = Array(Math.ceil(canvas.width / gridSize))
    .fill()
    .map(() => []);

function updateCollisionGrid(objects) {
    // 清空网格
    collisionGrid.forEach(col => col.length = 0);
    
    // 填充网格
    objects.forEach(obj => {
        const gridX = Math.floor(obj.x / gridSize);
        const gridY = Math.floor(obj.y / gridSize);
        collisionGrid[gridX][gridY] = obj;
    });
}

四、性能优化对比

测试环境：Chrome 105 / 60FPS目标

五、太空射击游戏案例

// 游戏状态
const game = {
    player: new Player(),
    enemies: [],
    bullets: [],
    score: 0,
    lastTime: 0
};

// 主游戏循环
function gameLoop(timestamp) {
    const deltaTime = timestamp - game.lastTime;
    game.lastTime = timestamp;
    
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 更新游戏状态
    game.player.update(deltaTime);
    updateEnemies(deltaTime);
    updateBullets(deltaTime);
    checkCollisions();
    
    // 渲染游戏
    renderBackground();
    game.player.draw();
    drawEnemies();
    drawBullets();
    drawUI();
    
    requestAnimationFrame(gameLoop);
}

// 启动游戏
gameLoop(0);

六、进阶优化策略

• 离屏Canvas：预渲染静态元素
• 对象池：重用对象减少GC
• Web Workers：复杂计算移出主线程
• 性能分析：使用Chrome DevTools
• 响应式设计：适应不同屏幕尺寸

// 离屏Canvas示例
const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 800;
offscreenCanvas.height = 600;
const offscreenCtx = offscreenCanvas.getContext('2d');

// 预渲染背景
function renderBackground() {
    offscreenCtx.fillStyle = '#000';
    offscreenCtx.fillRect(0, 0, 800, 600);
    // 绘制星空等静态元素...
}

// 主Canvas中直接绘制
ctx.drawImage(offscreenCanvas, 0, 0);