Javascript位运算符&；画布动画

我正在将精灵渲染到画布元素，并尝试避免亚像素定位，以避免图像模糊（根据此处的信息：）

我的问题发生在我尝试重新分配x位置时，如下所示：

this.pos.x = ~~ this.pos.x;

这使我的精灵永远不会在屏幕上移动，将其位置记录到控制台显示我被卡在起始位置

现在，如果我不在我的位置上执行按位运算符，只需记录输出：

console.log(~~ this.pos.x);

我可以看到按位运算符按预期执行，显示：

100
101
102
...

注意：我的动画与帧速率无关，因此我将其乘以一个增量并得到如下浮动：

100.64
101.36
102.04
102.68
103.32000000000001
104.00000000000001
104.68000000000002
...

我在这里更新位置，仅在这里更新：

this.pos.x += BE.delta.getSeconds() * this.accelleration;

因此

this.pos.x += ~~ (BE.delta.getSeconds() * this.accelleration);

不工作

仅截断数字的小数部分（例如，

~~100.1

为

100

；

~-100.1

为

-100

）。因此，如果您将小于

1

的值添加到

this.pos.x

，如果您将

this.pos.x=~~ this.pos.x

，您将永远不会看到它增加，因为您不断地擦除那些分数值

您没有提供太多的上下文，但您可能希望允许

this.pos.x

保留浮点数，但使用浮点数的固定版本进行渲染，例如：

var renderX = ~~this.pos.x;
// Use `renderX` rather than `this.pos.x` to render to the canvas;
// `renderX` will remain 100 while `this.pos.x` will gradually climb
// from 100 to 100.1, 100.5, 100.999999, etc. Once `this.pos.x`
// reaches 101 (or 101.1, etc.), `renderX` will become 101.

---

另外，圆形可能比地板更合适。如果

this.pox.x

是

100.99999999

，那么将其呈现在

101

比

100

？

更合理，只需截断数字的小数部分（例如，

~~100.1

是

100

；

~-100.1

是

-100

）。因此，如果您将小于

1

的值添加到

this.pos.x

，如果您将

this.pos.x=~~ this.pos.x

，您将永远不会看到它增加，因为您不断地擦除那些分数值

您没有提供太多的上下文，但您可能希望允许

this.pos.x

保留浮点数，但使用浮点数的固定版本进行渲染，例如：

var renderX = ~~this.pos.x;
// Use `renderX` rather than `this.pos.x` to render to the canvas;
// `renderX` will remain 100 while `this.pos.x` will gradually climb
// from 100 to 100.1, 100.5, 100.999999, etc. Once `this.pos.x`
// reaches 101 (or 101.1, etc.), `renderX` will become 101.

---

---

另外，圆形可能比地板更合适。如果

this.pox.x

是

100.99999999

，那么在

101

处渲染它肯定比在设置图像动画时在

100

处渲染它更有意义。

在设置图像动画时，应该将位置保持在与图像位置分开的变量中。这样，您可以保留浮点值进行计算，并将图像位置设置为整数值

如果将坐标的分数部分切掉，然后将其用作下一次计算的输入，则值将前后跳跃：

100 + 0.64 = 100.64
~~100.64 = 100
100 + 0.64 = 100.64
~~100.64 = 100
...

另外，使用

round

方法将浮点值转换为最接近的整数值：

x += BE.delta.getSeconds() * this.accelleration;
this.pos.x = Math.round(x);

---

设置图像动画时，应将位置保持在与图像位置分开的变量中。这样，您可以保留浮点值进行计算，并将图像位置设置为整数值

如果将坐标的分数部分切掉，然后将其用作下一次计算的输入，则值将前后跳跃：

100 + 0.64 = 100.64
~~100.64 = 100
100 + 0.64 = 100.64
~~100.64 = 100
...

另外，使用

round

方法将浮点值转换为最接近的整数值：

x += BE.delta.getSeconds() * this.accelleration;
this.pos.x = Math.round(x);

---

您是否在计算中使用

this.pos.x

的当前值？如果是这样，您可能会通过不断将位置舍入回其原始值来阻止移动计算继续进行。考虑把VAR保持在真实的位置（从你的计算中）和你用来定位图像的圆形位置。我想你在你的问题中漏掉了一些东西。您说过

console.log（~~this.pos.x）

按预期显示

100101102

，但您没有显示更新

this.pos.x

的方式/位置。更新

this.pos.x

时，您显示的唯一内容是您所说的内容不起作用。你能给我们看一下其他更新吗？见更新的问题。谢谢请记住-您是否在计算中使用

this.pos.x

的当前值？如果是这样，您可能会通过不断将位置舍入回其原始值来阻止移动计算继续进行。考虑把VAR保持在真实的位置（从你的计算中）和你用来定位图像的圆形位置。我想你在你的问题中漏掉了一些东西。您说过

console.log（~~this.pos.x）

按预期显示

100101102

，但您没有显示更新

this.pos.x

的方式/位置。更新

this.pos.x

时，您显示的唯一内容是您所说的内容不起作用。你能给我们看一下其他更新吗？见更新的问题。谢谢请记住-这取决于数字是正数还是负数，它是

floors

正数，但

cells

负数<代码>数学.ceil（-5.7）==~~~~~-5.7真正的数学.floor（5.7）==~~~5.7真正的@Esailija或者换句话说，它会截断。这就是我必须做的。保留一个单独的“可渲染”值。谢谢@头针：不用担心，很高兴这有帮助！这取决于数字是正数还是负数，它是

楼层

正数，但

单元

负数<代码>数学.ceil（-5.7）==~~~~~-5.7真正的数学.floor（5.7）==~~~5.7真正的@Esailija或者换句话说，它会截断。这就是我必须做的。保留一个单独的“可渲染”值。谢谢@头针：不用担心，很高兴这有帮助！