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);