소개

지금은 HTML5 Canvas 공부를 시작했습니다.
Canvas API를 사용한 애니메이션 구현은 jQuery animate() 와 css3 keyframes 라는 것과는 생각이 다릅니다. 처음 조사했을 때는 상당히 당황했기 때문에, 같은 분들을 위해 메모하고 싶습니다.

애니메이션 = 다시 그리기

Canvas에서는 편리한 애니메이션 방법은 없고, 단순히 그리기 자체를 반복하는 것으로 애니메이션을 실현시킵니다. 이미지로서는, 파라파라 만화와 같이 화면 자체가 차례차례로 바뀌어 가는 것일까요.

애니메이션 샘플

또한 ↓ 페이지에서 실제 움직임을 확인할 수 있습니다
h tp : //네코네코 완완. 기주 b. 이오/그래도/칸ゔぁs/아니마치온/

Canvas 애니메이션 절차

조금씩 다음과 같은 흐름이됩니다.

요소 삭제

요소 그리기

요소 이동 (이동하는 위치 좌표 재정의)

종료 플래그가 없으면 1.로 돌아온다

샘플 코드

index.html

<canvas id="myCanvas" width="100" height="100"></canvas>

script.js

function drawLoopSquare() {
    /* Canvas要素の定義など */
    var cs  = document.getElementById('myCanvas');
    var ctx = cs.getContext('2d');
    var w = cs.width;
    var h = cs.height;
    var x = 0;

    /* 描画フロー */
    function render() {
        // Canvas全体をクリア
        ctx.clearRect(0, 0, w, h);

        // 要素を描画する
        ctx.beginPath();
        ctx.strokeRect(x, 0, 10, 10);

        // 要素を動かす
        // 四角形のx座標がCanvasの横幅を超えたら初期位置(x座標を0)へ
        // そうでなければ、x座標を1増やす
        if (x > cs.width) {
            x = 0;
        } else {
            x += 1;
        }

        // このrender関数を繰り返す
        // 下記どちらかを使った場合は、外側でrender()を実行する※1（もしくは即時実行）
        // setTimeout(render, 100);
        // requestAnimationFrame(render);
    }
    /* ※1 */
    // render();

    /* render()関数を繰り返す */
    /* setTimeout、requestAnimationFrameではなく、setIntervalを使う場合 */
    setInterval(render, 100);
}
drawLoopSquare();

재묘화를 실시하기 위한 루프 메소드로서,

setInterval()

setTimeout()

requestAnimationFrame()

가 자주 사용됩니다. 각각 다음과 같이 구분할 수 있습니다.

정해진 시간에 루프를 하고 싶다: setInterval(), setTimeout()

드로잉 부하를 억제하고 싶다.

requestAnimationFrame() 정보

requestAnimationFrame()은 빠르고 CPU 친화적이지만 지원되지 않는 브라우저도 존재합니다.
대응하기 위한 polyfill는 이하가 됩니다.

window.requestAnimFrame = (function() {
  return (
      window.requestAnimationFrame       || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame    || 
      window.oRequestAnimationFrame      || 
      window.msRequestAnimationFrame     || 
      function(callback, time) {
        var time = time ? time: 1000 / 60;
        window.setTimeout(callback, time);
    }
  );
})();

또한 requestAnimationFrame은 글로벌이므로 경우에 따라 bind에서 this를 바인딩해야합니다.

{
    update: function() {
        // 座標を変更する処理など
    },
    draw: function() {
        // 要素を描画する処理など
    },
    render: function() {
        this.update();
        this.draw();
        requestAnimationFrame(this.render.bind(this));  // 引数にthisを使うためにbind
    }
}

결론

아직 알려지지 않은 것뿐이므로, 부정확한 곳이 있으면 코멘트나 편집 요구를 부탁합니다

추가: 2015년 5월 19일

Canvas 이벤트에 대해 별도의 기사를 썼습니다.
h tp : // 쿠이타. 코 m / 고양이 고양이 완완 / ms / 9 a f7fb34d0fb7f9fc870 )