部分渲染html5画布 - 性能

Question

我正在攻击一个金融图书馆，要求我提供实时更新到画布中的折线图。为了优化更新图表的过程，我想刚刚更新了最新的数据点，而不是清理和重新绘制整个画布。

当经常重新渲染最新的数据点时，我注意到线条不清晰（图像中有一个点）。

以下是该行最初的显示方式（无重绘）

在调用“partial_rerender”的几次更新后，这就是行看起来的样子：

请注意，2条线的 “加入”是可见的，带有较暗的阴影 。

是否有办法仅针对最新数据点实现部分重新绘制线条＆amp;没有完全画出整条线？

参考代码

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