Canvas Animation

안녕하세요 lovefield 입니다.
개인적으로 차트 그리는 방법을 공부하느냐고 배운걸 공유합니다 ㅎㅎ.

See the Pen oBZWyv by Ha Hyun Yong (@lovefield) on CodePen.

var canvas = document.querySelector('.canvas');
canvas.width = 300;
canvas.height = 20;

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

Math.ease = function (t, b, c, d) {
	t /= d;
	return -c * t*(t-2) + b;
};

var w = 0;
function drow(){
  if(canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = '#ff8c8f';
    ctx.fillRect(0,0,w,30);
    
    ctx.font = 'bold 14px/1.2 Sans-Serif';
    ctx.fillStyle = '#000';
    ctx.fillText(Math.floor(w)+'원',10,16);
    
    w = Math.ease(1,w,200 - Math.floor(w),60);
    if(w < 201){
      requestAnimationFrame(drow);
    }
  }
}
drow();

var canvas = document.querySelector('.canvas');
canvas.width = 300;
canvas.height = 20;

canvas를 선택하고 사이즈를 지정해줬습니다.
canvas는 css로 사이즈를 지정하시면 안됩니다.
보이는 화면은 변할지 몰라도 canvas 내부 사이즈는 변하지 않기 때문에 원하지 않는 모양이 나오게 됩니다.

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

Math.ease = function (t, b, c, d) {
	t /= d;
	return -c * t*(t-2) + b;
};

javascript 애니메이션 프레임과 easing 공식 입니다.

var w = 0;
function drow(){
  if(canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = '#ff8c8f';
    ctx.fillRect(0,0,w,30);
    
    ctx.font = 'bold 14px/1.2 Sans-Serif';
    ctx.fillStyle = '#000';
    ctx.fillText(Math.floor(w)+'원',10,16);
    
    w = Math.ease(1,w,200 - Math.floor(w),60);
    if(w < 201){
      requestAnimationFrame(drow);
    }
  }
}
drow();

그려주는 부분입니다.
‘w = 0’ 부터 시작해서 200 까지 애니메이션 프레임을 작동하고 easing 효과를 넣어줍니다.

참고자료 Easing 공식