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

在JavaScript中绘制矩形路径

1 个答案: