【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を使って作りました（デモページ）
これを実際に作りながらCanvasの触り方を学んでいきます
・・・今日はここまで
今後追加していきます