Canvas大量选中像素标记性能优化：如何高效绘制选中区域？

核心优化：批量操作ImageData #

当前代码循环调用putImageData逐个绘制像素，每次调用都会触发Canvas绘图上下文操作，大量像素时开销极大。改成一次性处理所有选中像素，只调用一次putImageData，能大幅提升性能：

const applySelectedPixelLayer = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const width = canvas.width;
    const height = canvas.height;
    
    // 获取画布当前的ImageData（保留原有内容）
    const imageData = ctx.getImageData(0, 0, width, height);
    // 用32位数组直接操作像素缓冲区，比逐个修改RGBA字节更快
    const data32 = new Uint32Array(imageData.data.buffer);
    
    // 遍历选中坐标，批量修改像素
    for (const [x, y] of selectedCoordinates) {
        const idx = y * width + x;
        // 设置为黑色不透明（ABGR格式，对应RGBA(0,0,0,255)）
        data32[idx] = 0xFF000000;
    }
    
    // 一次性将修改后的ImageData绘制回画布
    ctx.putImageData(imageData, 0, 0);
}, [selectedCoordinates]);

优化原理 #

• 将N次putImageData调用缩减为1次，避免频繁的上下文切换和绘图指令开销
• 使用Uint32Array直接操作像素缓冲区，单步完成单个像素的RGBA值设置，比逐个修改四个字节效率更高

备选优化：离屏Canvas缓存选中区域 #

如果需要频繁更新选中状态（比如拖拽过程中实时显示），可以用离屏Canvas提前绘制选中区域，再一次性合并到主画布，减少主画布的重绘次数：

// 初始化离屏Canvas（组件初始化时创建）
const offscreenCanvas = useMemo(() => {
    const canvas = document.createElement('canvas');
    canvas.width = 1000;
    canvas.height = 1000;
    return canvas;
}, []);

const applySelectedPixelLayer = useCallback(() => {
    const mainCanvas = canvasRef.current;
    if (!mainCanvas) return;
    const mainCtx = mainCanvas.getContext("2d");
    const offscreenCtx = offscreenCanvas.getContext("2d");
    const width = offscreenCanvas.width;
    const height = offscreenCanvas.height;
    
    // 清空离屏Canvas
    offscreenCtx.clearRect(0, 0, width, height);
    
    // 批量修改离屏Canvas的像素
    const imageData = offscreenCtx.getImageData(0, 0, width, height);
    const data32 = new Uint32Array(imageData.data.buffer);
    
    for (const [x, y] of selectedCoordinates) {
        const idx = y * width + x;
        data32[idx] = 0xFF000000;
    }
    
    offscreenCtx.putImageData(imageData, 0, 0);
    
    // 将离屏Canvas内容绘制到主画布
    mainCtx.drawImage(offscreenCanvas, 0, 0);
}, [selectedCoordinates, offscreenCanvas]);

额外场景优化 #

如果选中的是连续矩形区域，无需遍历所有像素，直接用fillRect绘制整个矩形，性能最优：

// 假设选中区域由(x1,y1)和(x2,y2)确定
const left = Math.min(x1, x2);
const top = Math.min(y1, y2);
const width = Math.abs(x2 - x1);
const height = Math.abs(y2 - y1);

ctx.fillStyle = 'black';
ctx.fillRect(left, top, width, height);

内容的提问来源于stack exchange，提问作者ste