使用键盘箭头在 canvas 周围移动字符串

Question

我正在尝试制作一款用于训练目的的基本游戏，玩家可以在其中上下左右移动。我已经设法在按下箭头键时将 "x" 打印到按下的方向，但是如果我向左或向下导航，我将无法删除旧打印件。

我尝试了很多不同的左下方向组合，但我无法找到它是如何工作的。

我在这里错过了什么？

<canvas id="ctx" width="500" height="500" style="border:1px solid black">sss</canvas>
<script>

document.onkeydown = checkKey;

var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var HEIGHT = 500;
var WIDTH = 500;
var x = 50;
var y = 50;
var speed = 20;
ctx.fillText('x', x,y); // Writes text 

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
        console.log('up');
        y-=speed;   
        ctx.clearRect(x,y, WIDTH, HEIGHT);          
        ctx.fillText('x', x,y); // Writes text 

    }
    else if (e.keyCode == '40') {
        // down arrow
        console.log('down');
        y+=speed; 
        ctx.fillText('x', x,y); // Writes text  

    }
    else if (e.keyCode == '37') {
       // left arrow
        console.log('left');
        x-=speed;
        ctx.fillText('x', x,y); // Writes text      
        ctx.clearRect(x,y, WIDTH, HEIGHT);

    }
    else if (e.keyCode == '39') {
       // right arrow
       console.log('right');
        x+=speed;
        ctx.fillText('x', x,y); // Writes text      
        ctx.clearRect(x,y, -WIDTH, -HEIGHT);

    }

}

</script>

如何让 "X" 在 canvas 周围导航而不留下旧照片？

JSFIDLE

谢谢！

Answer 1

我知道问题是什么，但我没有时间研究解决方案。

如果你看我的版本，我将 clearOld 提取到它自己的函数中并添加了一堆颜色以查看发生了什么。

另请注意，我稍微重新安排了代码，因此我们总是在更新坐标之前尝试从旧位置删除 'X'。（我还在函数的末尾添加了一个 return false 以使其在代码段中发挥得更好。）

当您编写文本时，它的边界区域与您用来覆盖它的矩形不同。

这个问题可能会帮助您找到更好的边界框：

How can you find the height of text on an HTML canvas?

document.onkeydown = checkKey;

var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var HEIGHT = 500;
var WIDTH = 500;
var x = 50;
var y = 50;
var speed = 20;
ctx.fillText('x', x, y); // Writes text 

//var oldFill = 

function clearOld(ctx, x, y) {
  ctx.fillStyle = "orange";
  ctx.fillRect(x, y, -WIDTH, -HEIGHT);
  ctx.fillStyle = "green";
  ctx.fillRect(x, y, 5, 5);
  ctx.fillStyle = "";
}

function checkKey(e) {

  e = e || window.event;

  if (e.keyCode == '38') {
    // up arrow
    console.log('up');
    clearOld(ctx, x, y);
    y -= speed;
    ctx.fillText('x', x, y); // Writes text 

  } else if (e.keyCode == '40') {
    // down arrow
    console.log('down');
    clearOld(ctx, x, y);
    y += speed;
    ctx.fillText('x', x, y); // Writes text  

  } else if (e.keyCode == '37') {
    // left arrow
    console.log('left');
    clearOld(ctx, x, y);
    x -= speed;
    ctx.fillText('x', x, y); // Writes text         

  } else if (e.keyCode == '39') {
    // right arrow
    console.log('right');
    clearOld(ctx, x, y);
    x += speed;
    ctx.fillText('x', x, y); // Writes text      



  }
  return false;
}

<canvas id="ctx" width="200" height="200" style="border:1px solid black">sss</canvas>

Answer 2

只要把clearRect移到x,y变化前，改成ctx.clearRect(x,y, WIDTH, -HEIGHT);

PS - 高度和宽度不准确，但这不仅仅是覆盖了 X。此外，如果你想，你应该考虑将其设为具有清晰 height/width 的等宽字体将其他内容作为文本放在 canvas 上。

使用键盘箭头在 canvas 周围移动字符串

Moving string around the canvas with keyboard arrows

javascript

canvas

key