在JavaScript中绘制矩形路径[重复]

Question

我看到，为了绘制矩形路径，您可以使用类似于 here 的公式。

我想知道矩形路径是否有类似的东西？

编辑：我希望能够让一个点逐步绘制出整个矩形路径，而不是只显示整个矩形。

即

function redraw () {
  // 
     Code for the animation, while keeping track of last point 
    (such that the end animation is continuous)

  //
  clearScreen();
  ctx.beginPath();
  ctx.rect(x,y,5,5);
  ctx.stroke();
}

setInterval(redraw, 16);
redraw();

我也不想使用任何外部库

Answer 1

您可以使用 generator function 预先定义动画 - 请原谅糟糕的代码，这只是为了给您一个想法：

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// here we create a generator function,
// where we define each step:
function* rect(ctx, x, y, x2, y2) {  
  // top line
  for (let k = x; k <= x2; k++) {
    ctx.lineTo(k, y);
    yield;
  }

  // right line
  for (let j = y; j <= y2; j++) {
    ctx.lineTo(x2, j);
    yield;
  }

  // bottom line
  for (let k = x2; k >= x; k--) {
    ctx.lineTo(k, y2);
    yield;
  }

  // left line
  for (let j = y2; j >= y; j--) {
    ctx.lineTo(x, j);
    yield;
  }
}

const steps = rect(ctx, 10, 10, 80, 90);
ctx.strokeStyle = "black"

function draw () {
  if (!steps.next().done){
    ctx.stroke();
  } else {
    // here the animation is done
    ctx.fill();
  }

  // 60 fps
  requestAnimationFrame(draw); 
}

draw();