四角と色

四角を塗る命令は c.fillRect(x, y, w, h)。左上 (x, y) から幅 w・高さ h を塗る。c は描画先の 2dContext。色は塗る前に c.fillStyle で決める。画面の左上が原点 (0, 0) で、x は右、y は下に増える。

export default の関数は一度だけ呼ばれる。描いて終わりなら、これでいい。

位置を変える

前の2つ x, y が位置。x を 140 から 300 にすると、四角は右へ寄る。y を増やせば下へ下がる。

大きさを変える

後ろの2つ w, h が幅と高さ。揃えれば正方形、違えれば長方形。下は幅 360・高さ 110 の横長。

数に名前をつける

同じ数を何度も書くと、変えるとき探し回る。const で名前をつけて、値を一か所で持つ。size を一辺にして中央へ置く。中央の左上は (画面の幅 - size) / 2。幅は c.canvas.width、高さは c.canvas.height。size を変えると、位置も大きさも追従する。

const は結び直さない名前。値を入れ替えるなら let を使う。

色を変える

fillStyle に色を入れる。"#4a90d9" のような16進か、"rgb(74, 144, 217)"。一度セットした色は、次に変えるまで続く。塗り分けるなら、四角の手前で入れ直す。

最後に 0 から 1 の不透明度を足して "rgba(158, 203, 255, 0.6)" にすると半透明になる。重ねると下が透けて、色が混ざる。

重なり

不透明な四角は、後に塗ったものが前に出る。canvas は命令の順に上塗りするだけで、奥行きの概念はない。2つの順を入れ替えると、上下が入れ替わる。