2D 描画でも WebGL を使うべきか？ スペクトラムウォーターフォール最速決定戦 | tech - 氾濫原

上のように、スペクトラムのウォーターフォール表示ではよく下に1行追記して全体を上にスクロールさせていくみたいな見せかたをするが、全体の再描画が必須なため、かなり描画負荷が高い処理となる。 いくつか実装を書いてどのぐらい差がでるかを検証してみた。 毎回 canvas の内容を全部描く http://cho45.stfuawsc.com/spectrum-performance/canvas-redraw-whole/ ctx.putImageData( ctx.getImageData(0, 1, canvas.width, canvas.height - 1), 0, 0 ); 上のようなコードで canvas 全体を 1px ずらして、最後の一行に新しいデータによる putImageData() をさらに行う。 ピクセルデータを直接シフトさせるやりかただと、一番ナイーブで実装が簡単だが実

[m_seki]

真似する

[UDONCHAN]

参考になる