Question

我不知道为什么我的clearRect（）在'reset'中无效。然而它适用于我的'up'功能。（我的“向上”功能用于清除画布，然后绘制+将图像翻转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

您的代码确实有效，只是重置功能正在重新绘制up（）放置它的最后位置的面。

Answer 3

与其他人所说的一样。每次调用translate时，您都在重新定义画布上的坐标系。函数是触发但由于坐标已被移动，因此它没有按预期执行。跟踪这种情况的一种方法是每次移动y坐标时在函数外增加一个变量，然后在你重置＆＃34;时将其添加回来。图像。

＆＃13;

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

＆＃13;

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

＆＃13;

html5 canvas：clearRect（）在函数内部不起作用

3 个答案: