javascript - 负坐标如何在 HTML5 Canvas 中工作？

Question

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。 Canvas 如何解释负 y 坐标？或者简单地说，下面的代码会做什么？

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

Answer 1

它根据原点从 -10 开始绘制 y 位置。

即:假设默认原点 0,0(左、上)离 y 轴 10 个像素将不可见，或者您可以认为它是在离屏幕 10 个像素处开始 y。

(将评论转换为答案)