Html画布绘图因画布元素太多而变慢

Question

我正在使用带有幻灯片预览条的幻灯片编辑器。 我正在使用电子并做出反应。 我的每张幻灯片都包含一个用于图像/文本的背景画布和一个用于绘图的前景画布。 我的绘图表现很好，直到我的预览条中有大约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;
}

Answer 1

回答你的问题：是的，当你增加画布总尺寸时，重绘需要更长的时间。 即使将这些画布缩小为“幻灯片大小”，您也可以通过添加全尺寸画布来大幅增加画布总尺寸。 顺便说一句， .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

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