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

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

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

Answer 1

它基于原点从 -10 开始绘制 y 位置。

即：假设默认原点 0,0（左，上）离 y 轴 10 个像素不可见，或者您可以将其视为离屏幕 10 个像素的开始 y。

（将评论转换为答案）