7 
function Background() {
    this.speed = 1; // Redefine speed of the background for panning

   // Implement abstract function
   this.draw = function() {
        // Pan background
        this.y += this.speed;
        this.context.drawImage(imageRepository.background, this.x, this.y);

        // Draw another image at the top edge of the first image
        this.context.drawImage(imageRepository.background, this.x, this.y - this.canvasHeight);

        // If the image scrolled off the screen, reset
        if (this.y >= this.canvasHeight)
            this.y = 0;
    };
}

背景画像を無限ループでレンダリングするロジックを提供する上記のコードを理解しようとしていました（連続的なパンの錯覚を与えます）。

次の行が理解できませんでした。

 this.context.drawImage(imageRepository.background, this.x, this.y - this.canvasHeight);

明らかに this.y - this.canvasHeight は > 0 になることはありません。負の y 座標はキャンバスによってどのように解釈されるのでしょうか? または簡単に言えば、次のコードは何をしますか?

ctx.drawImage(img, 0, -10);
4

1 に答える 1

9

原点に基づいて y 位置を -10 から描画します。

つまり、デフォルトの原点が 0,0 (左、上) であると仮定すると、y 軸から 10 ピクセル離れたところが表示されないか、画面から 10 ピクセル離れたところから y が始まると考えることができます。

(コメントを回答に変換)

于 2013-07-23T19:16:28.363 に答える