CANVAS

눈 내리는 밤

by Kim Ara

HTML

<canvas id="myCanvas" width="1440" height="400"> </canvas>

JavaScript

var canvas=$('#myCanvas').get(0);
var ctx=canvas.getContext('2d');
var ctxW=ctx.canvas.width;
var ctxH=ctx.canvas.height;

var bgImage=new Image();
bgImage.src='https://www.jeep.co.kr/content/dam/cross-regional/apac/jeep/ko_kr/bhp/image-home/MP_MAIN_0627.jpg.img.1440.jpg';


// x좌표를 랜덤으로 변경한다.
var x=Math.floor(Math.random()*ctxW)+1;
// 눈송이가 떨어지는 y축의 초기값을 설정한다.
var y=0;
// 눈송이의 크기를 랜덤으로 변경한다.
var size=Math.floor(Math.random()*3)+1;


// 눈송이를 그린다.
function snow(){
	ctx.fillStyle='rgba(255,255,255,0.7)';
  ctx.beginPath();
  // arc함수의 두 번재 인자에 y값이 증가하도록 하여 점차 화면에서 하단으로 떨어지는 모습을 보여준다.
  //ctx.arc(100, y++, 5, 0, Math.PI*2);
  ctx.arc(x, y++, size, 0, Math.PI*2);
  // 원에 색칠한다.
  ctx.fill();
}

// 매 시간 화면을 갱신한다.
function animate(){
	ctx.clearRect(0,0,ctxW, ctxH);
  ctx.drawImage(bgImage,0,0);
  snow();
}


var animateInterval=setInterval(animate,30);