负面协调如何在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

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

即:假设默认原点0,0(左,上)离开y轴10个像素将不可见,或者您可以将其视为离开屏幕10个像素的起点y.

(将评论转换为答案)