html5キャンバスでカスタムスクロール

Question

hmtl5キャンバスに表示される非常に大きなデータに対してスクロールとネイティブスクロールバーを提供するための推奨される方法は何ですか？

128000x128000ピクセルのデータを表示する必要があります。幅/高さが128000に設定されたキャンバスを使用することは、膨大な量のRAM（私の簡単な計算によれば約61GB）を使用するため、オプションではありません。

私はHTML5キャンバス用のカスタムスクロールバーを提供する方法が必要です。

Answer 1

jCanvasは、あなたを助けるかもしれないjQueryプラグインです。

Answer 2

興味深い質問。 <canvas>はあまり使用していませんが、<canvas>の内部は画像のように思えます。つまり、DOMに関する限りブラックボックスです。

このように、私はあなたが想像しているように実際にスクロールすることはできないと思います。 128000×128000 <canvas>の場合は、<div>のように入力してください。 1280×1280に設定し、<div>をoverflow:hiddenに設定します。しかし、128000×128000 <canvas>は実用的ではありません。

仮想の128000×128000キャンバスインターフェイスを提供していますが、チャンクに分割してスクロールインターフェイスを提供し、スクロールしながら各チャンクを描画します。

Answer 3

ChromeやFirefoxでキャンバスを大きくレンダリングするかどうかはわかりません。 キャンバス要素を作成しても、それをDOMに追加することはできません。ただ、このように：次に

var viewCanvas = document.getElementById('viewCanvas'); 
var viewContext = viewCanvas.getContext('2d'); 
viewCanvasContext.drawImage(hiddenCanvas, 40, 50, viewCanvas.width, viewCanvas.height, 0, 0, viewCanvas.width, viewCanvas.height); 

：

var hiddenCanvas = document.createElement('canvas'); 
hiddenCanvas.width = 128000; 
hiddenCanvas.height = 128000; 
var hiddenContext = hiddenCanvas.getContext('2d'); 

そして、実際にあなたの隠されたキャンバス

<canvas width="something reasonable" height="something reasonable" id="viewCanvas"/> 

の一部を表示した部分を描画するためにdrawImageメソッドを使用します小さなキャンバスを作成します上/下/右/左ボタンを使ってナビゲートするか、スクロールバーを表示するだけの20px幅のDIVを使用してスクロールバーを偽ったり、オンスクリーンをフックするリスナーでも。 そして、ユーザーが位置を変更するたびに、x/y位置（私の例では40と50）を更新してdrawImageに再度呼び出します。

これもまた、たとえ隠されたとしても、私はブラウザが大きなキャンバスで動作するのではないかと疑っています。

私は同じ問題の解決法を探していることがあるので、あなたの研究であなたが幸運になるなら、共有してください。