Очистить холст HTML

Мне нужен холст HTML, который отображает положение мыши в сетке JS при перемещении мыши, но я не могу очистить свой холст, я попытался использовать ctx.clearRect(0,0 canvas.width, canvas.height) и очистить с помощью клик, но он каким-то образом помнит предыдущий розыгрыш, который у него был. Я хочу, чтобы на холсте отображался только один черный квадрат за раз в зависимости от положения мыши. Вот демо на кодовой ручке и немного кода

<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>

javascript html canvas

07.05.2019 16:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

159

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы не начинаете новую обводку для каждого прямоугольника, а «складываете их», чтобы они перерисовывались с помощью .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>

07.05.2019 16:05

Вы можете попробовать это:

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;
});

One of the ways that is implicitly endorsed in the spec and often used in people’s apps to clear a canvas https://dzone.com/articles/how-you-clear-your-html5

Если ctx.clearRect не работает, маловероятно, что старый метод выполнения того же действия (переустановка ширины) будет иметь какое-либо значение.

— 07.05.2019 16:20

@DBS и все же, это было бы. Это сбрасывает весь контекст, включая текущее объявление подпути вместе с все устанавливаемыми параметрами контекста и его базовыми ImageData (т.е. много мусора для сбора). Вот почему никогда не следует использовать этот хак.

— 08.05.2019 01:31

07.05.2019 16:05