Question

我希望HTML画布在鼠标移动时在其JS网格上显示鼠标位置，但是我似乎无法清除画布，我尝试使用ctx.clearRect（0,0 canvas.width，canvas.height）和单击清除，但它以某种方式记住了它以前的抽奖。我希望一次只能在画布上显示一个黑色方块，具体取决于鼠标的位置。这里demo on code pen和一些代码

<canvas id="myMap" style="width: 300px;height: 300px;background-color: beige;"></canvas>
<script>
  var findDivisible = (x, scale) => {
    while (x % scale !== 0 && x > 0) {
      x = x - 1;
    };
    return x
  };

  var map = document.getElementById("myMap");
  map.width = 300;
  map.height = 300;
  var mapContext = document.getElementById("myMap").getContext("2d");
  map.addEventListener("mousemove", function(e) {
    mapContext.clearRect(0, 0, map.width, map.height);
    mapContext.rect(findDivisible(e.clientX - map.offsetLeft, 50), findDivisible(e.pageY - map.offsetTop, 50), 50, 50);
    mapContext.stroke();

  });
  map.addEventListener("click", function() {
    mapContext.clearRect(0, 0, 500, 500);
  })
</script>

Answer 1

您不是要为每个矩形开始新的笔划，而是要“堆积它们”，以便使用.stroke()重新绘制它们。

使用.beginPath()：

function findDivisible(x, scale) {
  while (x % scale !== 0 && x > 0) {
    x = x - 1;
  }
  return x;
}

var map = document.getElementById("myMap");
map.width = 300;
map.height = 300;
var mapContext = map.getContext("2d");
map.addEventListener("mousemove", function(e) {
  mapContext.clearRect(0, 0, map.width, map.height);
  mapContext.beginPath();
  mapContext.rect(
    findDivisible(e.clientX - map.offsetLeft, 50),
    findDivisible(e.pageY - map.offsetTop, 50),
    50,
    50,
  );
  mapContext.stroke();
});
map.addEventListener("click", function() {
  mapContext.clearRect(0, 0, 500, 500);
});

<canvas id="myMap" style="width: 300px;height: 300px;background-color: beige;"></canvas>

Answer 2

您可以尝试以下方法：

map.addEventListener("mousemove", function(e){              
  map.width = map.width;
  mapContext.rect(findDivisible(e.clientX-map.offsetLeft,50) , findDivisible(e.pageY - map.offsetTop,50), 50, 50);
  mapContext.stroke();              
});

map.addEventListener("click", function(){
  map.width = map.width;
});

规范中隐含认可的一种方法，通常在人们的应用中用于清除画布 https://dzone.com/articles/how-you-clear-your-html5

清除HTML画布

2 个答案: