5

我正在为一个小游戏构建引擎，现在我刚刚得到了一个带有两只小眼睛的红色圆圈作为主角。我有keyPress检测运动的功能，这很有效，但我想使用我很久以前在 QBASIC 中使用的东西来删除角色并在新位置重绘：XOR

基本上，在按键时会发生这种情况：

if (code == 39) {
    mainChar.drawChar();
    mainChar.x += 1;
    mainChar.leftEye.x += 1;
    mainChar.rightEye.x += 1;
    mainChar.drawChar();
}

我认为在同一个空间上绘制角色，然后调整位置并再次绘制会删除第一个实例并绘制一个新实例。这是我的drawChar方法的一个片段：

  context.beginPath();
  context.arc(mainChar.x, mainChar.y, mainChar.radius, 0, 2 * Math.PI, false);
  context.closePath();
  context.fillStyle = 'red';
  context.fill();
  context.globalCompositeOperation = "xor";

这是“有点”的工作，“有点”我的意思是它并没有完全擦除第一张图。第一次调用时没有任何变化（并且角色已在加载时调用）所以我认为 XOR 会完全擦除图像，因为它们的坐标和一切都相同？

我是否偏离了基础，实施了一些稍微错误的事情，还是有更好的方法来做到这一点？

4

1 回答 1

7

您是否注意到您圈子中未擦除的部分非常锯齿？

那是因为画布最初用抗锯齿绘制了你的圆圈，以在视觉上平滑你的圆圈的圆度。

当您对同一个圆进行异或运算时，画布不会擦除它最初创建的抗锯齿像素。

斜线也会发生同样的情况。

底线...在浏览器让我们关闭抗锯齿之前，XOR 将不起作用。这个选项已被提议给当权者。

在那之前，您可能会更改您的 drawChar，以便您可以“擦除”比您最初绘制的稍大的圆圈。

drawChar(50,"red");
drawChar(51,"white");

function drawChar(r,fill){
  ctx.beginPath();
  ctx.arc(100,100,r, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.fillStyle = fill;
  ctx.fill();
}
于 2013-05-24T17:32:22.810 回答