好奇心から、Fabric.jsを使用して同じことを試しました。
パフォーマンスが著しく向上しています — http://jsfiddle.net/M7n4p/
実験的な「group_rewrite」ブランチを使用していることに注意してください — https://github.com/kangax/fabric.js/branches
FWIW、これを作成するために使用されたコードは次のとおりです (Kinetic.js との比較を示すためだけに)。
マークアップ:
<canvas id="c" width="1200" height="600" style="border:1px solid #ccc"></canvas>
JS:
var canvas = new fabric.Canvas('c');
var rects = [ ];
for (var i = 1; i <= 47; i++) {
for (var j = 1; j <= 42; j++) {
var rect = new fabric.Rect({
left: i*28,
top: j*18,
width: 20,
height: 10,
fill: 'green'
});
rects.push(rect);
}
}
canvas.add(new fabric.Group(rects));