部分渲染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（）），然后重新绘制所有元素，以从先前的绘制调用中删除这些工件，并获得所需的结果。