Рисование прямоугольного пути в JavaScript [дубликат]

Question

Рисование прямоугольного пути в JavaScript [дубликат]

Первый результат работает, потому что наблюдается только $div[0]. $ div содержит все результаты, поэтому итерация $ div должна работать.

Array.from($div).forEach((div) => {
  observer.observe(div, {
    attributes: true, 
    subtree: true, 
    childList: true
  });
})

0

html canvas javascript

задан efxgamer 20 January 2019 в 00:51

1 ответ

Другие вопросы по тегам:

html canvas javascript

Похожие вопросы:

score 0 · Answer 1

Вы можете использовать генераторную функцию , чтобы заранее определить анимацию - простите плохой код, это просто чтобы дать вам идею:

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