불덩어리 발사와 같은 화염 효과를 구현하기 위한 HTML5 Canvas용 샘플 코드

캔버스는 HTML5에서 매우 중요하고 유용한 기능입니다. 플래시를 만드는 것처럼 캔버스에 어떤 요소든 그릴 수 있습니다. 오늘은 캔버스에 불꽃 방출 효과를 만들어 보겠습니다. 그것은 고대의 불덩어리 대포와 같으며, 브라우저 가장자리에서 튕겨져 나올 수 있어 꽤 멋진 느낌을 줍니다. 렌더링을 살펴보겠습니다.

여기에서 불꽃 공의 데모 데모를 볼 수 있습니다

물론 소스 코드, 주로 일부 JS 코드를 분석해야 합니다.

먼저 페이지에 캔버스 태그를 넣고 간단한 스타일을 지정해 주세요.

<canvas></canvas>

rrree

다음으로 JS 코드를 분석해 보겠습니다. JS를 단계별로 분석해 보겠습니다.

이것은 2차원 애니메이션이므로 캔버스의 getContext 메소드를 사용하여 2차원 애니메이션에 대한 작업이 포함된 객체를 반환합니다. animation.API, 코드는 다음과 같습니다:

canvas{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  cursor: crosshair;
}

입자를 정의합니다:

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

그런 다음 불덩어리를 정의합니다:

particles = {};
newParticle = (function(){  var nextIndex = 0;  return function(x,y,r,o,c,xv,yv,rv,ov){
    particles[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      r: r,
      o: o,
      c: c,
      xv: xv,
      yv: yv,
      rv: rv,
      ov: ov
    };
  };
})();

여기서 삶은 불덩어리의 수명 아래에서 볼 수 있듯이, 불덩어리 방출 강도의 변화에 ​​따라 수명 값이 달라집니다.

다음 단계는 새총을 끌고 불덩어리 발사를 준비하는 마우스를 정의하는 것입니다.

fireballs = {};
newFireball = (function(){  var nextIndex = 0;  return function(x,y,xv,yv,life){
    fireballs[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      xv: xv,
      yv: yv,
      life: life
    };
  };
})();

보시다시피 마우스 버튼이 튀어오르면 새로운 불덩이가 생성되고 생명값이 초기화됩니다.

다음은 불덩이가 브라우저 가장자리에 닿았을 때의 반사 효과를 포함해 불덩이가 움직일 때의 애니메이션 실행 코드입니다.

mouse = {x:0,y:0,d:0};
onmousemove = function(e){
  mouse.x = e.clientX-o.x;
  mouse.y = e.clientY-o.y;  var dx = mouse.x - pos1.x,
      dy = mouse.y - pos1.y;
  mouse.d = Math.sqrt(dx*dx+dy*dy);
};

charging = false;
pos1 = {x:0,y:0};
showInstructions = true;
onmousedown = function(e){
  pos1.x = mouse.x;
  pos1.y = mouse.y;
  charging = true;
  showInstructions = false;
};

onmouseup = function(){  if(charging){
    newFireball(
      mouse.x,
      mouse.y,
      (pos1.x-mouse.x)*0.03,
      (pos1.y-mouse.y)*0.03,      600
    );
    charging = false;
  }
};

위 내용은 불덩어리 발사와 같은 화염 효과를 구현하기 위한 HTML5 Canvas용 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!