canvas-optimize

Canvas渲染优化

使用场景

优化HTML5 Canvas的渲染性能。

核心优化技巧

1. 脏矩形渲染

只重绘发生变化的区域，而非整个画布。

class DirtyRectRenderer {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.dirtyRects = [];
    }
    
    markDirty(x, y, w, h) {
        this.dirtyRects.push({ x, y, w, h });
    }
    
    render(drawFunc) {
        if (this.dirtyRects.length === 0) return;
        
        // 合并脏矩形
        const bounds = this.mergeDirtyRects();
        
        // 清除脏区域
        this.ctx.clearRect(bounds.x, bounds.y, bounds.w, bounds.h);
        
        // 只重绘脏区域
        this.ctx.save();
        this.ctx.beginPath();
        this.ctx.rect(bounds.x, bounds.y, bounds.w, bounds.h);
        this.ctx.clip();
        drawFunc();
        this.ctx.restore();
        
        this.dirtyRects = [];
    }
    
    mergeDirtyRects() {
        let minX = Infinity, minY = Infinity;
        let maxX = -Infinity, maxY = -Infinity;
        
        for (const rect of this.dirtyRects) {
            minX = Math.min(minX, rect.x);
            minY = Math.min(minY, rect.y);
            maxX = Math.max(maxX, rect.x + rect.w);
            maxY = Math.max(maxY, rect.y + rect.h);
        }
        
        return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
    }
}

2. 离屏Canvas

将静态内容渲染到离屏Canvas，然后绘制到主Canvas。

// 创建离屏Canvas
const offscreen = document.createElement('canvas');
offscreen.width = 800;
offscreen.height = 600;
const offCtx = offscreen.getContext('2d');

// 在离屏Canvas上绘制静态内容
function drawStaticContent() {
    offCtx.fillStyle = '#f0f0f0';
    offCtx.fillRect(0, 0, 800, 600);
    // ... 其他静态内容
}

// 主循环中直接绘制离屏Canvas
function render() {
    ctx.drawImage(offscreen, 0, 0);
    // ... 绘制动态内容
}

3. 对象池

避免频繁创建和销毁对象。

class Pool {
    constructor(createFn, resetFn, size = 100) {
        this.createFn = createFn;
        this.resetFn = resetFn;
        this.pool = [];
        for (let i = 0; i < size; i++) {
            this.pool.push(createFn());
        }
    }
    
    get() {
        return this.pool.length > 0 ? this.pool.pop() : this.createFn();
    }
    
    release(obj) {
        this.resetFn(obj);
        this.pool.push(obj);
    }
}

// 使用
const particlePool = new Pool(
    () => ({ x: 0, y: 0, vx: 0, vy: 0, life: 0 }),
    (p) => { p.x = 0; p.y = 0; p.life = 0; }
);