캔버스에서 개체를 무작위로 복제하는 방법

캔버스에 불꽃 놀이를 만들었습니다. 이것을 캔버스 안의 임의의 위치에 복제하고 싶습니다.

마지막으로 임의의 위치에서 임의의 순서로 실행하고 싶습니다. 무엇을 더 추가해야합니까?

var ctx = document.getElementById('canvas').getContext('2d');

ctx.translate(100, 100);

function fireworks() {
  //clipping
  ctx.beginPath();
  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
  ctx.clip();

  var x = 130; //final position
  var t = 0; //0-1, this is what you change in animation loop
  var tx = 0; //actual position of element for x

  function myLoop() {
    ctx.clearRect(-(canvas.width / 2), -(canvas.height / 2), canvas.width, canvas.height);
    tx = EasingFunctions.easeInOutQuad(t) * x;
    for (var i = 0; i < 12; i++) {
      ctx.beginPath();
      ctx.rotate(Math.PI / 6);
      ctx.arc(tx, tx, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.closePath();
    }

    if (t < 1) {
      t += 0.01; //determines speed
      requestAnimationFrame(myLoop);
    }
  }
  myLoop();
}
EasingFunctions = {
  easeInOutQuad: function(t) {
    return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t
  }
}


fireworks();
#canvas {
  border: 1px solid #000;
}
<canvas id="canvas" width="800" height="600"></canvas>

Mosh Feu

솔루션에는 몇 가지 단계가 포함됩니다.

  1. fireworks마지막 "불꽃 놀이"가 끝나면 전화하세요 .
  2. 초기 불꽃 놀이의 위치를 무작위로 지정합니다.
  3. 지우기 clip에 의해 상태 .restore().save()

코드에 주석을 추가했습니다.

var ctx = document.getElementById('canvas').getContext('2d');

function fireworks() {
  // restore and save to reset the "clip" state
  ctx.restore();
  ctx.save();
  //clipping
  ctx.beginPath();
  // move to a random position in the canvas before drawing
  ctx.translate(random(canvas.width), random(canvas.height));
  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
  ctx.clip();

  let tx = 0; //actual position of element for x
  let t = 0;

  function myLoop() {
    ctx.clearRect(-(canvas.width / 2), -(canvas.height / 2), canvas.width, canvas.height);
    tx = EasingFunctions.easeInOutQuad(t) * 130;
    for (var i = 0; i < 12; i++) {
      ctx.beginPath();
      ctx.rotate(Math.PI / 6);
      ctx.arc(tx, tx, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.closePath();
    }

    if (t < 1) {
      t += 0.01; //determines speed
      requestAnimationFrame(myLoop);
    } else {
      // the firework is done, let's create another one
      fireworks();
    }
  }
  myLoop();
}

function random(max, min = 0) {
  return Math.floor(Math.random() * max) + 1;
}

EasingFunctions = {
  easeInOutQuad: function(t) {
    return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t
  }
}

fireworks();
#canvas {
  border: 1px solid #000;
}
<canvas id="canvas" width="800" height="600"></canvas>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

R에서 Tableau로 만든 4 캔버스 사분면 차트를 복제하는 방법이 있습니까?

분류에서Dev

개체가 같은 위치에있는 동안 캔버스 개체를 회전하는 방법

분류에서Dev

목록에서 별도의 캔버스로 캔버스에 텍스트를 추가하는 방법.

분류에서Dev

kineticjs에서 캔버스 객체를 얻는 방법은 무엇입니까?

분류에서Dev

그룹에서 반복되는 개체를 실제로 할당하는 방법

분류에서Dev

나무 또는 더 많은 캔버스를 서로 위에 놓는 방법은 무엇입니까?

분류에서Dev

캔버스에서 마지막으로 그린 개체를 삭제하는 JavaFX

분류에서Dev

캔버스 차트를 그리기 위해 DB에서 값을 채우는 동적 JSON 개체를 만드는 방법은 무엇입니까?

분류에서Dev

Android Canvas에서 전체 캔버스를 jpeg 이미지로 저장하는 방법은 무엇입니까?

분류에서Dev

스테이지 내부에서만 무작위로 개체를 생성하는 방법

분류에서Dev

내 캔버스 (fabricjs)를 항상 창의 전체 너비로 설정하고 창 크기를 조정하고 개체를 제자리에 유지하는 방법

분류에서Dev

fabric.js에서 캔버스로 이미지를 저장하는 방법

분류에서Dev

캔버스에서 더 많은 커서 위치를 얻는 방법

분류에서Dev

캔버스에서 텍스트를 세로로 가운데 맞추는 방법

분류에서Dev

Lua의 테이블에서 개체를 무작위로 선택하는 방법은 무엇입니까?

분류에서Dev

한 캔버스에서 게스트를 가져와 Windows Phone 8 앱에서 프로그래밍 방식으로 다른 캔버스에 설정하는 방법

분류에서Dev

한 캔버스에서 게스트를 가져와 Windows Phone 8 앱에서 프로그래밍 방식으로 다른 캔버스에 설정하는 방법

분류에서Dev

캔버스 개체를 화면 중앙에 정렬하는 방법은 무엇입니까?

분류에서Dev

스캐너 스캔 버튼으로 문서를 스캔하는 방법

분류에서Dev

C에서 무작위로 반복되는 숫자를 피하는 방법

분류에서Dev

두 개의 사용자 지정 개체를 기반으로 목록에서 중복을 제거하는 방법

분류에서Dev

변수에서 개체를 무작위로 그리는 방법은 무엇입니까?

분류에서Dev

개체 배열에서 모든 복제를 제거하는 방법은 무엇입니까?

분류에서Dev

WinJS에서 개체를 올바르게 복제하는 방법

분류에서Dev

HTML 캔버스에서 텍스트를 중앙에서 정렬하는 방법은 무엇입니까?

분류에서Dev

kotlin에서 ArrayList를 무작위로 인덱스로 반복하는 방법은 무엇입니까?

분류에서Dev

동적 캔버스에서 텍스트 개체의 경계 상자를 계산하는 방법

분류에서Dev

자바 스크립트 캔버스 회전하는 물체에서 360 *으로 촬영하는 방법

분류에서Dev

Swift를 사용하여 CDTReplicator 개체에서 복제 ID를 얻는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    R에서 Tableau로 만든 4 캔버스 사분면 차트를 복제하는 방법이 있습니까?

  2. 2

    개체가 같은 위치에있는 동안 캔버스 개체를 회전하는 방법

  3. 3

    목록에서 별도의 캔버스로 캔버스에 텍스트를 추가하는 방법.

  4. 4

    kineticjs에서 캔버스 객체를 얻는 방법은 무엇입니까?

  5. 5

    그룹에서 반복되는 개체를 실제로 할당하는 방법

  6. 6

    나무 또는 더 많은 캔버스를 서로 위에 놓는 방법은 무엇입니까?

  7. 7

    캔버스에서 마지막으로 그린 개체를 삭제하는 JavaFX

  8. 8

    캔버스 차트를 그리기 위해 DB에서 값을 채우는 동적 JSON 개체를 만드는 방법은 무엇입니까?

  9. 9

    Android Canvas에서 전체 캔버스를 jpeg 이미지로 저장하는 방법은 무엇입니까?

  10. 10

    스테이지 내부에서만 무작위로 개체를 생성하는 방법

  11. 11

    내 캔버스 (fabricjs)를 항상 창의 전체 너비로 설정하고 창 크기를 조정하고 개체를 제자리에 유지하는 방법

  12. 12

    fabric.js에서 캔버스로 이미지를 저장하는 방법

  13. 13

    캔버스에서 더 많은 커서 위치를 얻는 방법

  14. 14

    캔버스에서 텍스트를 세로로 가운데 맞추는 방법

  15. 15

    Lua의 테이블에서 개체를 무작위로 선택하는 방법은 무엇입니까?

  16. 16

    한 캔버스에서 게스트를 가져와 Windows Phone 8 앱에서 프로그래밍 방식으로 다른 캔버스에 설정하는 방법

  17. 17

    한 캔버스에서 게스트를 가져와 Windows Phone 8 앱에서 프로그래밍 방식으로 다른 캔버스에 설정하는 방법

  18. 18

    캔버스 개체를 화면 중앙에 정렬하는 방법은 무엇입니까?

  19. 19

    스캐너 스캔 버튼으로 문서를 스캔하는 방법

  20. 20

    C에서 무작위로 반복되는 숫자를 피하는 방법

  21. 21

    두 개의 사용자 지정 개체를 기반으로 목록에서 중복을 제거하는 방법

  22. 22

    변수에서 개체를 무작위로 그리는 방법은 무엇입니까?

  23. 23

    개체 배열에서 모든 복제를 제거하는 방법은 무엇입니까?

  24. 24

    WinJS에서 개체를 올바르게 복제하는 방법

  25. 25

    HTML 캔버스에서 텍스트를 중앙에서 정렬하는 방법은 무엇입니까?

  26. 26

    kotlin에서 ArrayList를 무작위로 인덱스로 반복하는 방법은 무엇입니까?

  27. 27

    동적 캔버스에서 텍스트 개체의 경계 상자를 계산하는 방법

  28. 28

    자바 스크립트 캔버스 회전하는 물체에서 360 *으로 촬영하는 방법

  29. 29

    Swift를 사용하여 CDTReplicator 개체에서 복제 ID를 얻는 방법은 무엇입니까?

뜨겁다태그

보관