【HTML5】入門 HTML5をまとめてみる2【Canvas】
こんにちは、しきゆらです。
HTML5関連の記事は2回目です（今までのHTML5関連の記事はこちら→HTML5関連）
ポチップ今回は、第4章にあたるCanvasについてです。
HTML5といえばCanvasという感じがしますが、どんなものなのでしょうか。
※まだ途中までなので今後追加していく予定です。
Canvasとは？
簡単に言うと「HTML上に図を描ける要素」といえるでしょう。
今までは、図を表示したい場合は画像を用意しなければいけませんでしたが
Canvasを使えばJavaScriptで好きな図なり絵なりを書けるようになります。
しかし、いきなりCanvas要素を追加したとしても何も表示されない。
デフォルトでは何の情報もないわけですね。
まっさらなホワイトボードを宣言しただけなんで、ここに必要な情報を描いていきましょう。
まずは宣言の仕方から。
<!-- 幅500横300のサイズで宣言 -->
<canvas id="canvas" width="500" height="300"></canvas>id属性はいいでしょう。
JavaScriptでCanvasを操作するときに必要なのでつけておきます。
なお、Canvas要素はそれぞれが独自に情報を保持するそうです。
これで宣言は終わり。
何かを描きこむにはJavaScriptが必要です。
簡単な四角形を描いてみましょう。
JavaScriptで以下のように書きます
function draw(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(30, 50, 90, 20);
}これで四角形が描けました。
まず2行目では、Canvas要素を見つけるためにidを指定して探します。
3行目は、見つけたCanvas要素の描画コンテキストを取得しています。
この2行は必ずやることなのでセットで覚えておくといいと思います。
※描画コンテキストとは、簡単に言うと図を描くためのツール群的な感じです。
現在は「"2d"」のみ定義されています。
getContextには必ず"2d"を渡さなければいけません。
Canvasへの描きこみはこの描画コンテキストに対して行います。
4行目では、Canvasへ座標(30, 50)の点から90×20サイズの四角形を描きこんでいます
四角形を描きこむ時に関係するツール
以下のようなものがあります
- fillStyle : CSSの色指定、パターン、グラデーションによる塗りつぶしのスタイルを指定できます。デフォルトでは単色の「黒」で、ページが開いている間は設定が保持されます。
- fillRect(x, y, width, height) : (x, y)座標に幅width、高さheightの大きさの矩形を描画します。塗りつぶしは現在のfillStyleが適用されます。
- strokeStyle : fillStyleと同じように、図形の線のスタイルを指定できます。
- strokeRect(x, y, width, height) : fillRectと同じですが、塗りつぶされず図形の枠線のみ描画されます。
- clearRect(x, y, width, height) : 指定された矩形内のピクセルをクリアします。
なお、Canvasのすべてをリセットしたい場合は「Canvasの幅や高さを指定する」と内容が消去され、設定もリセットされます
サイズを変えなくても、値を再設定するだけでもリセットできます
Canvasの座標
Canvasの座標は、左上が原点(0, 0)となります。
右へ行くほどX軸の値が大きくなり、下へ行くほどY軸の値が大きくなります。
次回は、上記のものを実際に作りながらCanvasの触り方を学んでいきます。
・・・今日はここまで
今後追加していきます
ポチップ