【HTML5】入門 HTML5をまとめてみる2【Canvas】

HTML/CSS

こんにちは、しきゆらです

HTML5関連の記事は2回目です（今までのHTML5関連の記事はこちら→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の触り方を学んでいきます

 

・・・今日はここまで

今後追加していきます

入門 HTML5

Posted by しきゆら