Question

我需要一些帮助来了解此主题。

我有一个canvas元素，它以此方式表示“ X”轴上的运动背景：

if(this.x < -this.width) this.x = 0;    
ctx.drawImage(this.img, this.x,this.y,this.width,this.height);
ctx.drawImage(this.img,this.x + this.width, this.y, this.width,this.height);

那么，我应该如何阅读第一行（-this.width）？否定的“ this.width”代表什么以及它如何工作？

谢谢！

Answer 1

它只是通过使它与原始值相反来检查该值。也就是说，如果它是-1，则将其设为1，反之亦然。

Answer 2

这基本上可以确保同时显示两个图像（可以部分显示第一个图像）。因此，例如，您有以下选择：

this.x是正数或大于this.width（即x = 20，width = 100）。这将在X轴上将第一个图像从px-s 20绘制到120，然后将下一个图像从px-s 120绘制到220。
this.x为负数，但不小于-this.width（即x = -20，width = 100）。这将在px-s -20到80之间绘制第一个图像，在px-s -20到80之间绘制第二个图像。如您所见，该图像的20px宽度将不会显示在画布上。
this.x为负且小于this.width的负值，即（x = -120，width = 100）。这会将第一个图像从-120px绘制到-20px，第二个图像从-20px绘制到80px。这将完全隐藏第一个图像，并显示第二个图像，并修剪20px的宽度。

基本上，您的代码行包含第3个选项，以确保您不会以画布上的第一个图像结束。不知道为什么要对其中一张要修剪的图像满意，如果X为负，我会将X设置为0

希望下面的JSfiddle使其更加清晰。 https://jsfiddle.net/8yzg9b5e/8/

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</canvas>

</body>

我应该如何理解这一行？（-this.width）

2 个答案:

我应该如何理解这一行？ （-this.width）

2 个答案:

我应该如何理解这一行？（-this.width）