html5 холст: clearRect() не работает внутри функция

Question

Не знаю, почему мой clearRect() не работает внутри моего сброса. Однако он работает в моей функции «вверх». (Моя функция «вверх» используется для очистки холста, а затем рисует + переводит изображение на 10 пикселей)

Назначение - создать объект на холсте, который можно перемещать по щелчкам кнопки пользователя. Одна из кнопок должна быть кнопкой сброса, которая очищает холст и перерисовывает изображение в центре холста.

Вот мой код ниже. Там должны быть 4 функции для движения, но я включил только «вверх» функцию движения здесь для общей идеи:

var surface = document.getElementById("drawingSurface"); 
var ctx = surface.getContext("2d"); 

var reset = function() { 
alert("Testing"); // <--- This works 
ctx.clearRect(0, 0, 499, 499); // <--- But this is not working 

ctx.beginPath(); 
ctx.strokeRect(200, 200, 100, 100);//Face 
ctx.fillRect(220, 225, 15, 15);//Left eye 
ctx.fillRect(265, 225, 15, 15);//Right eye 
ctx.fillRect(245, 250, 10, 10); // Nose 
ctx.fillRect(210, 185, 20, 15); // Left ear 
ctx.fillRect(270, 185, 20, 15); // Left ear 
ctx.closePath(); 
}; 

var up = function() { 
ctx.clearRect(0, 0, 499, 499); 

ctx.beginPath(); 
ctx.translate(0, -10); 
ctx.strokeRect(200, 200, 100, 100);//Face 
ctx.fillRect(220, 225, 15, 15);//Left eye 
ctx.fillRect(265, 225, 15, 15);//Right eye 
ctx.fillRect(245, 250, 10, 10); // Nose 
ctx.fillRect(210, 185, 20, 15); // Left ear 
ctx.fillRect(270, 185, 20, 15); // Left ear 
ctx.closePath(); 
}; 

Вот мой HTML:

<canvas id="drawingSurface" width="500" height="500" style="border: 1px  
solid black; background-color: #FFF;">Cat</canvas> 
<br> 
<button onclick="reset();">RESET</button> 
<button onclick="up();">MOVE UP</button> 
<button onclick="left();">MOVE LEFT</button> 
<button onclick="right();">MOVE RIGHT</button> 
<button onclick="down();">MOVE DOWN</button> 

Answer 1

Ваш код действительно работает, это просто, что функция сброса выполняет перерисовку лица в последней позиции, которая была помещена().

Answer 2

Я считаю, что вопрос что перевод, применяемый в up, сохраняется. Таким образом, стрелка clear, но затем сразу же перерисовывает одно и то же изображение (попробуйте комментировать функции рисования в reset).

Для того, чтобы сбросить перевод, вы можете использовать ctx.setTransform(1, 0, 0, 1, 0, 0);, поместив его где-нибудь перед тем, как розыгрыш вызовет reset.

Answer 3

Наряду с тем, что говорят все остальные. Вы пересматриваете систему координат на своем холсте каждый раз, когда вы вызываете перевод. Функция : стрельба, но она не делает то, что вы ожидаете, потому что координаты были перемещены. Способ отслеживать это состоит в том, чтобы увеличивать переменную вне функции каждый раз, когда вы меняете координаты y, а затем добавляете ее обратно, когда вы «перезагружаете» изображение.

var surface = document.getElementById("drawingSurface"); 
 
var ctx = surface.getContext("2d"); 
 
var yShift = 0; 
 

 
function reset() { 
 
ctx.clearRect(0, 0, 499, 499); // <--- But this is not working 
 

 
ctx.beginPath(); 
 
ctx.strokeRect(200, 200+yShift, 100, 100);//Face 
 
ctx.fillRect(220, 225+yShift, 15, 15);//Left eye 
 
ctx.fillRect(265, 225+yShift, 15, 15);//Right eye 
 
ctx.fillRect(245, 250+yShift, 10, 10); // Nose 
 
ctx.fillRect(210, 185+yShift, 20, 15); // Left ear 
 
ctx.fillRect(270, 185+yShift, 20, 15); // Left ear 
 
ctx.closePath(); 
 
}; 
 

 
var up = function() { 
 
ctx.clearRect(0, 0, 499, 499); 
 

 
ctx.beginPath(); 
 
ctx.translate(0,-10); 
 
yShift += 10; 
 
ctx.strokeRect(200, 200, 100, 100);//Face 
 
ctx.fillRect(220, 225, 15, 15);//Left eye 
 
ctx.fillRect(265, 225, 15, 15);//Right eye 
 
ctx.fillRect(245, 250, 10, 10); // Nose 
 
ctx.fillRect(210, 185, 20, 15); // Left ear 
 
ctx.fillRect(270, 185, 20, 15); // Left ear 
 
ctx.closePath(); 
 
};

<canvas id="drawingSurface" width="500" height="500" style="border: 1px  
 
solid black; background-color: #FFF;">Cat</canvas> 
 
<br> 
 
<button onclick="reset();">RESET</button> 
 
<button onclick="up();">MOVE UP</button> 
 
<button onclick="left();">MOVE LEFT</button> 
 
<button onclick="right();">MOVE RIGHT</button> 
 
<button onclick="down();">MOVE DOWN</button>