html5 canvas：clearRect（）在函數內部不起作用

Question

不知道為什么我的clearRect（）在'reset'中不起作用。 但是它在我的“向上”功能中起作用。 （我的“向上”功能用於清除畫布，然后將圖像向上繪制+轉換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

我認為，問題是，在應用的翻譯up一直持續。 因此clear是可行的，但是隨后立即重繪相同的圖像（嘗試在reset注釋掉繪圖功能）。

要重置翻譯，可以使用ctx.setTransform(1, 0, 0, 1, 0, 0); ，將其放置在圖形調用reset之前的某個位置。

Answer 2

您的代碼確實起作用，只是reset函數在up（）放置它的最后位置重繪了該表面。

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>