2

私は 2 つの html キャンバスを使用しています。fronendCanvas はユーザーに表示され、html DOM ツリーの一部であり、ウィンドウの幅と高さの 100% を持つように設定されています。backendCanvas は JavaScript コードで作成され、含めるために使用されます。私が描く必要がある巨大な図。

/** FrontendCanvas */
// HTML
<canvas id="canvas"></canvas> 

// JavaScript
frontCanvas.width = window.innerWidth;
frontCanvas.height = window.innerHeight;

// CSS
#canvas {
   display: block;
   background-color: #dddddd;
}

/** BackendCanvas */
// JavaScript
backCanvas = document.createElement('canvas');
backCanvas.width = diagram.maxX;
backCanvas.height = diagram.maxY;

基本的に、視覚化をスムーズにするために、frontendCanvas は、drawImage 関数を使用して backendCanvas に描画された巨大な画像の一部のみを表示します (ユーザーは、マウスを使用して図全体で視覚化領域をドラッグできます。例を参照してくださいHTML5 キャンバスを背景画像とともに移動する）。

frontCanvas.getContext('2d').drawImage(
    backCanvas,
    (-ix - offsetX),
    (-iy - offsetY),
    (frontCanvas.width),
    (frontCanvas.height),
    0,
    0,
    (frontCanvas.width),
    (frontCanvas.height)
);

backendCanvas の幅と高さを 15000 に設定するとすべて正常に動作しますが、実際に必要なサイズ、幅 62322、高さ 50946 に設定すると、何らかの方法で drawImage が機能しなくなり、サイズ エラーがスローされます。

IndexSizeError: Index or size is negative or greater than the allowed amount
(frontCanvas.height)

私の推測では、キャンバスの最大サイズに達していてリセットされていると思いますが、そうではないようです。

  1. キャンバスの参照では、キャンバスの幅と高さの制限は unsigned long であるため、私が言及した数値よりもはるかに大きいと述べています。

  2. drawImage 関数呼び出しの直前に backendCanvas のサイズを確認しましたが、正しいです。

どんな助けでも大歓迎です！

ありがとう。

4

1 に答える 1