Html画布绘制速度因画布元素过多而减慢

Html canvas drawing slows with too many canvas elements

本文关键字：元素 速度 布绘制 绘制 Html 布元素      更新时间：2023-09-26

我正在开发一个带有幻灯片预览条的幻灯片放映编辑器。我在用电子和反应。我的每张幻灯片都包含一个用于图像/文本的背景画布和一个用于绘图的前景画布。我的绘图性能很好，直到我的预览带中有大约20张幻灯片，然后绘图速度非常慢。我正在绘制鼠标移动事件，以便用户看到它拖在他们的光标后面。

我想当我在预览幻灯片上画画时，我已经把问题缩小到了ctx.stroke（）行。预览幻灯片要小得多，但分辨率与用户实际绘制的主画布相同

当屏幕上有超过40幅画布时，有什么方法可以让它更具表演性吗？

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;
}

要回答您的问题：是的，随着画布总大小的增加，重新绘制需要更长的时间。通过添加全尺寸画布，即使这些画布被缩小为"幻灯片大小"，也会显著增加画布的总大小。顺便说一句，.stroke不是你的问题——它呈现得很快。

每个幻灯片画布的分辨率与主画布的分辨率相同。DOM必须记住原始大小，这样画布的总大小就会随着每一张新幻灯片而急剧增加。

一个解决方案是缩小每张幻灯片的画布（==显示大小），而不是保持与主画布相同的分辨率。如果用户想要重新绘制幻灯片，则从points为该幻灯片动态创建一个全尺寸画布。画布总大小较小==性能更好。

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

我们没有更多的代码，但如果您一直在重新绘制每个幻灯片画布，请不要这样做！

相关文章：