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);
答案 0 :(得分:5)
根据原点从y位置开始绘制-10。
即:假设默认原点0,0(左,上)离开y轴10个像素将不可见,或者您可以将其视为距离屏幕10个像素的起点y。
(将评论转换为答案)