JS-Do it! JS - #11일 (16)

16. 캔버스에서 애니메이션 실행하기

 

 

 

requestAnimationFrame(콜백)

애니메이션은 한 위치에서 다른 위치로 옮겨가며 그래픽 요소를 계속 화면에 그려야한다

즉, 좌표를 옮기고 그래픽 요소를 그리는 함수를 반복한다

 

 

무작위 원 20개 만들어 움직이기

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function Circle(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;

  this.dx=Math.floor(Math.random()*4)+1;
  this.dy=Math.floor(Math.random()*4)+1;


  this.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
  }

  this.animate=function(){
    this.x += this.dx;
    this.y += this.dy;

    if(this.x+this.radius>canvas.width || this.x-this.radius<0){
      this.dx = -this.dx;
    }
    if(this.y+this.radius>canvas.height || this.y-this.radius<0){
      this.dy = -this.dy;
    }

    this.draw();
  }
}

const objs = [];
for (let i = 0; i < 20; i++) {
  const radius = Math.floor((Math.random() * 50)) + 10;
  const x = Math.random() * (canvas.width - radius * 2) + radius;
  const y = Math.random() * (canvas.height - radius * 2) + radius;
  const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
  objs.push(new Circle(x, y, radius, color));      
}

function update(){
  // 캔버스 지우기
  // objs의 각 요소마다 애니메이션 실행하기 <-반복
  ctx.clearRect(0,0,canvas.width,canvas.height);
  for(let i=0;i<objs.length;i++){
    let obj=objs[i];
    obj.animate();
  }

  requestAnimationFrame(update);
}
update();

 

마무리 실습2

네모 객체 2개 만들어서 움직이기

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

canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

function Rect(x,y,w,h,c){
    this.x=x;
    this.y=y;
    this.w=w;
    this.h=h;
    this.c=c;

    this.dx=Math.floor(Math.random()*10)+1;
    this.dy=Math.floor(Math.random()*10)+1;

    this.draw=function(){
        ctx.beginPath();
        ctx.fillStyle=this.c;
        ctx.fillRect(this.x,this.y,this.w,this.h,this.c);
    }

    this.animation=function(){
        this.x +=this.dx;
        this.y +=this.dy;

        if(this.x+this.w>canvas.width || this.x<0){
            this.dx = -this.dx;
        }

        if(this.y+this.h>canvas.height || this.y<0){
            this.dy = -this.dy;
        }
        this.draw();
    }
}

const r1 = new Rect(10, 10, 50, 50, "red");
const r2 = new Rect(20, 20, 30, 30, "blue");


function update(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    r1.animation();
    r2.animation();

    requestAnimationFrame(update);
}

r1.draw();
r2.draw();
update();