javascript - 由于 Canvas 元素过多，HTML Canvas 绘制速度变慢

Question

我正在开发带有幻灯片预览条的幻灯片编辑器。我正在使用 Electron 并进行 react 。我的每张幻灯片都包含一个用于图像/文本的背景 Canvas 和一个用于绘图的前景 Canvas 。我的绘图性能一直很好，直到我的预览条中有大约 20 张幻灯片，然后绘图速度就变得非常慢。我正在利用鼠标移动事件进行绘图，以便用户看到它跟随光标。

我想当我在预览幻灯片上绘图时，我已经将问题范围缩小到了 ctx.lines() 行。预览幻灯片要小得多，但与用户实际在其上绘图的主 Canvas 具有相同的分辨率。

当屏幕上有超过 40 个 Canvas 时，有什么方法可以提高性能吗？

apply(ctx, pointIndex) {
    let points = this.path.getPoints().slice(pointIndex);
    ctx.lineWidth = this.getLineWidth();
    if(points.length === 1){
        ctx.fillRect(points[0].x - (this.getLineWidth() / 2), points[0].y - (this.getLineWidth() / 2), this.getLineWidth(), this.getLineWidth());
        return;
    }
    ctx.beginPath();
    ctx.moveTo(Math.floor(points[0].x), Math.floor(points[0].y));
    points.slice(1).forEach(function(point) {
        ctx.lineTo(Math.floor(point.x), Math.floor(point.y));
    });
    ctx.stroke();
    ctx.closePath();
    ctx.lineWidth = 1;
    pointIndex = this.path.getPoints().length - 1;
    return pointIndex;
}

Answer 1

回答您的问题:是的，当您增加 Canvas 总大小时，重绘所需的时间会更长。通过添加全尺寸 Canvas ，您可以显着增加 Canvas 总尺寸，即使这些 Canvas 已缩小为“幻灯片尺寸”。顺便说一句，.lines 不是你的问题——它渲染得非常快。

每个幻灯片 Canvas 的分辨率与主 Canvas 相同。 DOM 必须记住原始大小，因此每张新幻灯片的 Canvas 总大小都会急剧增加。

解决方法是使每个幻灯片 Canvas 更小(==显示尺寸)，而不是保持与主 Canvas 相同的分辨率。如果用户想要重绘幻灯片，则可以从该幻灯片的点动态创建一个全尺寸的 Canvas 。更小的 Canvas 总大小 == 更好的性能。

Canvas 具有缩放命令，可让您轻松获取全尺寸 Canvas 内容并将其缩放至较小的显示尺寸:

var c=document.createElement('canvas');
var cctx=c.getContext('2d');
c.width=smallSlideWidth;
c.height=smallSlideHeight;
var scale=Math.min((slideWidth/mainCanvasWidth),(slideHeight/mainCanvasHeight));
cctx.scale(scale,scale);
... now draw your slide using the same coordinates as your main canvas

我们没有更多的代码，但如果您一直在重绘每个幻灯片 Canvas - 不要这样做!