Canvasでアニメーションするための最小テンプレート

Canvasを勉強していますが、環境を作るのが難しいです。

いつも「どうだったっけ？」と悩んでしまいます。

特にアニメーションの方法は忘れがちです。

書籍のテンプレート

Canvasを勉強するために書籍を買いました。

Designing Math. 数学とデザインをむすぶプログラミング入門

作者:古堅真彦
ビー・エヌ・エヌ

Amazon

けど、載っているサンプルがかなり難しい。

そのサンプルを理解するために分解してみました。

ベース

まず、アニメーションに必要なベースとなるJavaScriptを確認します。

サンプルにあるマウスクリックやマウスムーブ部分を無しにして作り直しました。

let canvas, ctx

canvas = document.getElementById('canvas')
ctx = canvas.getContext('2d')

var timerId = setInterval(loop, 33)

setIntervalでアニメーション（ループ）させています。

ループ部分

ループ部分は以下となります。

赤の正方形が右に移動するだけのアニメーションです。

function loop() {
    // 背景
    ctx.fillStyle = 'white'
    ctx.fillRect(0, 0, 1280, 1600)

    // 動く正方形
    ctx.fillStyle = 'red'
    ctx.fillRect(x, 100, 30, 30)
    x++
}

背景を先に読み込むことで正方形の動きがわかりやすくなります。

css

cssで画面の真ん中にcanvasが来るようにしています。

マージンはデフォルトのままです。

html,body{
    /* margin: 0 auto; */
    text-align: center;
}

#canvas {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 640px;
    background-color:darkgray;
}

全体

jsの全体は以下となります。

最初にxを定義しています。

let canvas, ctx
let x = 0

canvas = document.getElementById('canvas')
ctx = canvas.getContext('2d')

var timerId = setInterval(loop, 33)

function loop() {
    // 背景
    ctx.fillStyle = 'gray'
    ctx.fillRect(0, 0, 1280, 1600)

    // 動く正方形
    ctx.fillStyle = 'red'
    ctx.fillRect(x, 100, 30, 30)
    x++
}