Html畫布繪圖放緩了太多的畫布元素

我正在使用幻燈片預覽條帶有幻燈片放映編輯器。我正在使用電子並作出反應。我的每張幻燈片都包含用於圖像/文本的背景畫布和用於繪製的前景畫布。我的繪畫表現很好，直到我的預覽圖中有20張幻燈片，然後繪製速度變得非常緩慢。我正在繪製鼠標移動事件，以便用戶看到它跟蹤他們的光標。Html畫布繪圖放緩了太多的畫布元素

我想我已經縮小了我的問題到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; 
}

來源

2016-04-28 Kevin

它在所有瀏覽器中的工作方式是否一樣？也許你應該將它作爲一個錯誤報告給瀏覽器的開發人員。爲什麼不重複使用同一個畫布多次，或刪除畫布，這將不會有用？ –

要回答你的問題：是的，它需要更長的時間重繪爲你增加總的畫布大小。即使將這些畫布縮小爲「幻燈片尺寸」，您也可以通過添加完整尺寸的畫布大幅增加總的畫布尺寸。順便說一句，.stroke不是你的問題 - 它呈現得非常快。

您的每張幻燈片畫布都與您的主畫布具有相同的分辨率。 DOM必須記住原始大小，以便在每張新幻燈片中總的畫布大小顯着增加。

解決的辦法是使每個幻燈片畫布更小（==顯示大小），而不是保持與主畫布相同的分辨率。如果用戶想要重畫一張幻燈片，然後從該幻燈片的points動態創建一個全尺寸的畫布。總畫布尺寸越小==性能越好。

帆布具有縮放命令，可以讓你輕鬆地把你的全尺寸的帆布內容，並將其擴展到較小的顯示器尺寸：

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

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

來源

2016-04-28 17:39:14 markE

Html畫布繪圖放緩了太多的畫布元素

回答

相關問題