我有一个带有实时数组值的动态图，它使用画布来绘制运行良好的图，但我希望在单页中有超过 50 个具有 50 个不同值数组的独特图。
实现这一目标的最佳方法是什么？我有令人迷惑它必须知道使用多个画布应用程序性能可能会慢，但我的应用程序是针对手机的桌面。
-- Edit--
我做了这样的事情来满足我的要求.. http://jsfiddle.net/atluriajith/v4Rhv/
图表可以正确绘制到 100，之后图表的速度会变慢。这是我做的正确方式吗？
-- Edit--
【问题讨论】：
标签： javascript html performance canvas html5-canvas
在您继续之前，我认为值得验证您是否存在性能问题。
"Premature optimization is the root of all evil"
一个相当直接的解决方案是减少您正在渲染的画布数量。使您的 UI 永远不会渲染超过给定性能的合理支持的画布。没有人需要一次看 50 张图，这实在是太多信息了。
【讨论】：
您可以使用一个足够大的画布来容纳图表。
然后，您可以使用 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 中，则不需要进行裁剪。
【讨论】：