Question

我有一个带有实时数组值的动态图表，它使用画布绘制图形，工作正常，但我希望单页中有50多个独特的图形，其中包含50个不同的值数组。

实现这一目标的最佳方法是什么？我已经知道，使用多个画布应用程序的性能可能会变慢，但我的应用程序是针对台式机而不是移动设备。

-- Edit--

我做了一些这样的事情来满足我的要求.. http://jsfiddle.net/atluriajith/v4Rhv/

图表正确地绘制到100，之后图表的速度变慢。这是我做的正确的方式吗？

-- Edit--

Answer 1

您可以使用足以容纳图形的单个画布。

然后你可以使用translate和clip将图形绘制到画布上的隔离区域（又名“虚拟画布”）。根据您打算绘制图形的方式，这可能不是必需的。

在重绘图表之前，只需要清除一次。

在这种情况下，您可能会将其组织成5 x 10个单元格。

例如（免责声明：未经测试，例如）：

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    cols = 5,
    rows = 10,
    cellWidth = 200,
    cellHeight = 100;

 canvas.width = cols * cellWidth;
 canvas.height = rows * cellHeight;

 document.body.appendChild(canvas);

 ...

 /// draw a graph:
 var x = cellX * cellWidth,   /// cell indexes to position
     y = cellY * cellHeight;

 ctx.save();
 ctx.rect(x, y, cellWidth, cellHeight);
 ctx.clip();

 /// draw graph here

 ctx.restore();

如果你可以在x，y和cellWidth / cellHeight中包含图形，则不需要剪裁。

Answer 2

在您继续之前，我认为有必要验证您是否存在性能问题。

"Premature optimization is the root of all evil"

一个相当简单的解决方案就是减少渲染的画布数量。使您的UI不会渲染更多的画布而不是给定性能的合理支持。没有人需要同时看到50个图表，这只是太多的信息。

在单页中使用多个画布的最佳方式

2 个答案: