sprite 를 활용하라.

canvas 에 어떠한 객체를 그릴 때 유사하게 사용하는 패턴들이 있다면 미리 sprite 형태로 만들어두면 성능에 도움이 된다.

예를 들어 시간에 따라 변화하는 particle 이 있다고 쳤을 때

var alpha = 0; 
function drawArc() {
    if (alpha > 1000) alpha = 0;

    context.fillStyle = "rgba(255, 0, 255, " + (alpha * 0.001) + ")";
    context.arc(xxxxx);
    context.fill();

    alpha++;

  requestAnimationFrame(drawArc);
}

requestAnimationFrame(drawArc);

위와 같은 애니메이션 효과를 주는 코드가 있을 때 requestAnimationFrame 을 동작할때마다

fillStyle 지정하는것과 fill() 메소드로 그려주는 것을 매번 실행해야한다.

하지만 사실상 어느정도 패턴이 있는 상태다.

왜냐하면 색상은 기본에 alpha 값만 변하기 때문이다.

현재는 대략 1000개까지 갈 수 있는데

arc 크기에 따른 1000 개를 미리 이미지화 해놓고 draw 만 해도 된다.


var alpha = 0; 
function drawArc() {
    if (alpha > 1000) alpha = 0;


    context.drawImage(img, x, y, width, height, dx, dy, width, height);

    alpha++;

  requestAnimationFrame(drawArc);
}

requestAnimationFrame(drawArc);

results matching ""

    No results matching ""