Question

在下面的代码中，每调用一次函数clearRect（），每50毫秒删除一次我在画布上绘制的图形的渲染，但是仅当从“ moveVerts（）”中删除了绘制顶点的for循环时才起作用。我得到的包括循环在内的结果是，即使调用了函数来清除canvas 2d上下文，新的图形也会在先前的图形之上渲染。第一次尝试使用Javascript。

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var xCoord = [0, 176, 220, 259, 284, 310, 317, 310, 289, 262, 244, 219, 0, 0, 156, 198, 231, 246, 246, 231, 209, 182, 145, 0];
var yCoord = [0, 0, 8, 24, 45, 87, 133, 176, 214, 240, 251, 262, 262, 240, 240, 227, 200, 165, 116, 89, 72, 63, 59, 59];
var numCoord = xCoord.length;

ctx.beginPath();
ctx.lineWidth = "0";
ctx.strokeStyle = "black";
ctx.moveTo(0, 0);
for ( i = 0; i < numCoord; i++) {
  ctx.lineTo(xCoord[i], yCoord[i]);
}

ctx.closePath();
ctx.stroke();

setInterval("moveVerts()", 50)
// make it squiggle
function moveVerts() {
  var mScale = (Math.random() - .5) * 12;
  ctx.clearRect(0, 0, c.width, c.height);
  for ( i = 0; i < numCoord; i++) {
    ctx.lineTo(xCoord[i] + mScale, yCoord[i] + mScale);
  }
  ctx.closePath();
  ctx.stroke();

}

<canvas id="canvas" width=350 height=350></canvas>

Answer 1

您的变量i被声明为全局变量。尝试使用let。示例（让我= 0；我

Answer 2

您忘了打电话

ctx.beginPath();

您的moveVerts函数中的

。如果没有，画布将保留您要绘制的路径，每次都添加新行，然后对整个对象进行描边。

固定代码（还有其他人提到的内容）：

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var xCoord = [0, 176, 220, 259, 284, 310, 317, 310, 289, 262, 244, 219, 0, 0, 156, 198, 231, 246, 246, 231, 209, 182, 145, 0];
var yCoord = [0, 0, 8, 24, 45, 87, 133, 176, 214, 240, 251, 262, 262, 240, 240, 227, 200, 165, 116, 89, 72, 63, 59, 59];
var numCoord = Math.min(xCoord.length, yCoord.length);

ctx.lineWidth = "0";
ctx.strokeStyle = "black";

moveVerts();
setInterval(moveVerts, 50);

// make it squiggle
function moveVerts() {
  var mScale = (Math.random() - .5) * 12;
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.beginPath();
//^^^^^^^^^^^^^^^^
  ctx.moveTo(xCoord[0] + mScale, yCoord[0] + mScale);
  for (var i = 1; i < numCoord; i++) {
    ctx.lineTo(xCoord[i] + mScale, yCoord[i] + mScale);
  }
  ctx.closePath();
  ctx.stroke();
}

<canvas id="canvas" width=350 height=350></canvas>

为什么除非在Javascript中删除了for循环，否则间隔函数不会执行

2 个答案: