部分渲染html5画布-性能
部分渲染html5画布-性能
提问于 2017-06-30 12:11:55
我的工作对象是一个金融库，它要求我通过实时更新到画布中的线条图。为了优化更新图表的过程，我想只更新最新的数据点，而不是清理和重新绘制整个画布。
当只频繁地重新呈现最新的数据池时，我注意到这条线不清晰(图像中有一个点)。
--这是这条线最初的样子(没有重绘)
在对“”进行了几次更新之后，行如下所示：
注意，这2行的“连接”可以用更深的阴影看到。
是否有一种方法只为最新的数据点实现部分重新绘制线&而不是完全绘制整条线？
参考码
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();
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-06-30 12:49:36
每次呈现时，您都需要创建一个新的路径，否则最终会一次又一次地重新呈现相同的内容。
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
}Stack Overflow用户
发布于 2017-06-30 12:15:48
当您在画布上绘图时，您确实会覆盖所需的像素。但其余的都保持不变。你想要达到的目标是不可能的。您必须清除画布(canvas.clear())，然后重新绘制所有元素，以从以前的绘图调用中删除这些工件，并实现您想要的结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44846234
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号