html5 画布：clearRect() 在函数内部不起作用答案

【问题标题】：html5 canvas: clearRect() not working inside functionhtml5 画布：clearRect() 在函数内部不起作用
【发布时间】：2016-11-01 05:50:57
【问题描述】：

不知道为什么我的 clearRect() 在我的“重置”中不起作用。然而，它适用于我的“向上”功能。（我的'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>

【问题讨论】：

运行代码时返回错误：'reset is not a function'。尝试将其更改为function reset 或window.reset = function

标签： javascript function html5-canvas

【解决方案1】：

我认为问题在于up 中应用的翻译仍然存在。所以clear 正在触发，但随后会立即重新绘制相同的图像（尝试注释掉reset 中的绘制函数）。

要重置翻译，您可以使用ctx.setTransform(1, 0, 0, 1, 0, 0);，将其放置在reset 中的绘图调用之前的某个位置。

【讨论】：

【解决方案2】：

您的代码确实有效，只是重置函数在 up() 放置它的最后一个位置重绘面部。

【讨论】：

【解决方案3】：

与其他人所说的相同。每次调用 translate 时，您都在重新定义画布上的坐标系。函数 is 正在触发，但由于坐标已被移动，它并没有按照您的预期进行。跟踪这一点的一种方法是在每次移动 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>

【讨论】：