部分渲染HTML5畫布-性能

Question

我在一個金融庫中工作，該庫要求我實時更新畫布中的折線圖。 為了優化更新圖表的過程，我想到的只是更新最新的數據點，而不是清除並重新繪制整個畫布。

當經常僅重新渲染最新數據點時，我注意到該行不清楚（圖像中有斑點）。

這是該行的初始外觀（不重繪）

在幾次調用“ partial_rerender”之后，這是該行的外觀：

注意， 兩行的“連接”以較深的陰影可見 。

有沒有一種方法可以僅針對最新的數據點實現部分線的重繪而不能完全繪制整個線？

參考代碼

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 2;
ctx.lineJoin = "miter";
ctx.moveTo(20, 50);
ctx.lineTo(100, 50);
ctx.save();
ctx.lineTo(150, 60);
ctx.stroke();

/*Call this every second to re-draw only the latest data point*/
function partial_rerender(){
ctx.clearRect(100,50, 400,400);
ctx.restore();
ctx.lineTo(150, 60);
ctx.stroke();
}

Answer 1

您每次渲染時都需要創建一個新路徑，否則最終將一遍又一遍地重新渲染相同的內容。

ctx.save()和ctx.restore()從堆棧中推送和彈出，對於每個還原，您都需要具有匹配的保存。 ctx.save() ， ctx.restore() ， ctx.restore()第二個還原不執行任何操作，因為沒有匹配的保存。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 2;
ctx.lineJoin = "miter";
ctx.moveTo(20, 50);
ctx.lineTo(100, 50);
ctx.save();
ctx.lineTo(150, 60);
ctx.stroke();

// Your function should look more like this
function partial_rerender(){
   ctx.lineWidth = 2;
   ctx.lineJoin = "miter";
   ctx.save();  // needed to remove clip
   ctx.beginPath(); // removes old path ready to create a new one
   ctx.rect(100,50, 400,400); // create a clip area
   ctx.clip(); // activate the clip area
   ctx.clearRect(100,50, 400,400);
   ctx.beginPath(); // needed to draw the new path 
   ctx.moveTo(100,50)
   ctx.lineTo(150, 60);
   ctx.stroke();
   ctx.restore(); // remove the clip area
}

Answer 2

在畫布上繪制時，您會覆蓋必要的像素。 但是其余的保持不變。 您試圖實現的目標是不可能的。 您必須清除畫布（canvas.clear（）），然后重新繪制所有元素，以從先前的繪制調用中刪除這些工件，並獲得所需的結果。