javascript - KineticJS - 动画平铺不透明度时性能缓慢[示例]

Question

我遇到了矩形网格的问题。

网格为 120 x 60。

JSFiddle 示例在这里http://jsfiddle.net/5MfYR/

---

这是 CoffeeScript 代码中的等价物：

window.size = {
    width: $(window).width()
    height: $(window).height()
}

window.grid = {
    size: {
        x: 40*3
        y: 20*3
    }
    tiles: []
}

window.stage = new Kinetic.Stage {
    container: "container"
    width: window.size.width - 10
    height: window.size.height - 10
}

window.gridLayer = new Kinetic.Layer {

}
window.stage.add window.gridLayer

createSquares = ()->
    console.log "CREATING TILES"

    tileSize = {
        width: parseFloat(window.size.width) / window.grid.size.x
        height: parseFloat(window.size.height) / window.grid.size.y
    }


    for ix in [0..window.grid.size.x]
        for iy in [0..window.grid.size.y]

            tile = new Kinetic.Rect {
                x: ix*tileSize.width
                y: iy*tileSize.height
                width: tileSize.width
                height: tileSize.height

                fill: "#ff3300"
                stroke: "#ff3300"
            }

            window.grid.tiles.push tile

            window.gridLayer.add tile

    window.gridLayer.draw()
    return

createSquares()

refreshTiles = ()->
    for tile in window.grid.tiles
        tile.setOpacity Math.random()
    window.gridLayer.draw()

setInterval ()->
    stats.begin()
    refreshTiles()
    stats.end()
, 100

---

知道瓶颈是什么吗？

动画瓷砖不透明度的任何替代方法？