使用XOR在JavaScript/HTML5中绘制以删除旧sprite

我正在为一个小游戏构建引擎，现在我有一个红色的圆圈，有两只小眼睛作为主角。我有

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

---

我是否偏离了基准，实施了一些轻微的错误，还是有更好的方法来实现这一点？

您是否注意到您的圆圈中未擦除的部分非常粗糙

这是因为canvas最初使用抗锯齿绘制圆，以在视觉上平滑圆的圆度

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

斜线也是如此

一句话……除非浏览器允许我们关闭抗锯齿功能，否则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();
}

---

谢谢这就解释了为什么图像如此。。。模糊的用白色圆圈擦除角色意味着必须重新绘制他面前的任何背景或对象。是的，我记得很久以前用GDI进行异或擦除——这很简单而且有效。我想这就是“进步”！帆布是另一种动物。您可能会发现，删除/重画整个场景对于除性能最密集的项目外的所有项目都是最好的。为了获得最佳性能，您可以重新绘制画布的部分或使用第二个隐藏的“缓冲区”画布来保存下一帧。然后只需将缓冲区绘制到显示画布上，然后通过绘制缓冲区重新开始整个过程。顺便说一句，您可以有两个重叠的画布。背景画布将位于“动画”画布下。这样，您就可以在动画画布上擦除圆圈，而无需重新绘制任何背景。下面是一篇相当不错的文章：该文章的一个更新：画布将自动“缓冲”您的绘图，从“beginPath”开始，以第一次填充或笔划结束。如果你能在调用fill/stroke之前完成下一帧的所有绘制，那么你将被自动缓冲！我也很惊讶XOR并没有像1980年那样好用！但另一方面，现在画画太快了，可能人们认为不需要了。