HTML Canvas에서 플래시 ⚡️ 만들기

안녕하세요 여러분, , 후에 또 다른 재미있는 캔버스 실험으로 돌아왔습니다. 이번에는 캔버스의 선 기법을 사용하여 번쩍이는 섬광을 만들었습니다. 캔버스의 창의성은 무한하며 가능성을 탐색하는 것은 사용자에게 달려 있습니다.


(펜이 실행되지 않거나 창이 뜨면 다시 실행을 눌러주세요. 간혹 펜이 실행되지 않는 문제가 있습니다.)

종이에 구불구불한 선을 그릴 때도 같은 개념을 사용했습니다.

선을 그리다.

이전 줄의 끝점을 다음 줄의 시작점으로 사용합니다.

이것을 계속 반복하십시오.

위의 codepen에서 코드를 확인할 수 있습니다.

생성된 볼트 유형을 가지고 놀기 위해 이 구성을 추가했습니다.

const interval = 3000;
const lightningStrikeOffset = 5;
const lightningStrikeLength = 100;
const lightningBoltLength = 5;
const lightningThickness = 4;

interval - 지정된 밀리초 후에 번개를 생성합니다.lightningStrikeOffset - 각 볼트의 각도를 결정합니다. 오프셋이 클수록 볼트가 더 비스듬하게 보입니다. 나는 5가 충분한 가치를 발견했습니다.lightningStrikeLength - 스트라이크의 볼트 수를 결정합니다.lightningBoltLength - 한 줄의 길이를 결정합니다.lightningThickness - 각 선의 굵기를 결정합니다.

페이드 효과를 위해 볼트를 반복하고 볼트의 불투명도와 두께를 줄였습니다.

for (let i = 0 ; i < lightning.length ; i++) {
  lightning[i].opacity -= 0.01;
  lightning[i].thickness -= 0.05;
  if (lightning[i].thickness <= 2) {
    lightning[i].end.y -= 0.05;
  }
  lightning[i].draw();
}