javascript - 部分渲染 html5 canvas - 性能

Question

我正在为一家金融图书馆工作，该图书馆要求我为 Canvas 中的折线图提供实时更新。为了优化更新图表的过程，我想到只更新最新的数据点，而不是清除并重新绘制整个 Canvas 。

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

这是线条最初的样子(没有重画)

经过几次更新调用“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
}