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

我們沒有更多的代碼，但是如果你一直在重新繪制每個幻燈片 - 不要這樣做！