使用 XOR 在 JavaScript / HTML5 中绘图以删除旧的精灵

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

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

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

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

  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 会完全删除图像，因为它们的坐标和所有内容都是相同的？

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

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

这是因为画布最初使用抗锯齿功能绘制圆圈，以在视觉上平滑圆圈的圆度。

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

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

底线...除非浏览器允许我们关闭抗锯齿功能，否则异或将无法工作。这一选项已向当权者提出。

在那之前，您可以更改您的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();
}