2

キャンバス間でデータをコピーすることについてこの質問に似た状況がありますが、私の場合、キャンバス エンジン自体に問題が発生していると思います。

オンスクリーン キャンバスと同じ幅と高さのオフスクリーン キャンバスを作成しています。

  @offscreenCanvas = document.createElement('canvas')

  # assign same dimensions as onscreen canvas
  @offscreenCanvas.width  = canvas.width
  @offscreenCanvas.height = canvas.height

次に、オフスクリーン キャンバスからオンスクリーン キャンバスに次のように描画します。

# grab the width and height of the canvas
{ width, height } = @canvasElement
{ x, y } = offset

# copy image from layer into canvas
@context.drawImage 
  @offscreenContext.canvas, -x, -y, width, height, -x, -y, width, height

オフセットは、このすべての描画が行われる前に「ライブ」キャンバス コンテキストを変換する関数への引数でもあります。

@context.save()
@context.translate(@offset.x,@offset.y)
@renderer.draw(world, @offset)
@context.restore()

言い換えれば、オンスクリーン コンテキストの変換されたオフセットに対応するオフスクリーン コンテキストのセクションを取得しようとしています。

これにはいくつかの問題があります。オフセットによって「カメラ」が原点から遠くに移動すると、オフスクリーン キャンバスの「エッジ」に遭遇します。

オフスクリーン キャンバスの端に問題があることを視覚的に示す

画面上のキャンバスに対して同じレンダリング操作を行うと、要素は問題ないことに注意してください。

オフスクリーン キャンバスは、キャンバスと同じように「エッジ」からの描画を処理するのにあまり適していないようです (定義された領域外の描画コマンドを黙って無視します)。の上または左[0,0](または下または右)に行った描画を反映します[width,height]。これに対応する方法はありますか?

私が試したこと：

  • オフスクリーン キャンバスの幅と高さを調整します (残念ながら、これが座標に与える影響は予測が難しいようです)。
4

1 に答える 1