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

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

 

HTML5関連の記事は2回目です(今までのHTML5関連の記事はこちら→HTML5関連

アマゾンリンク

今回は、第4章にあたるCanvasについてです

HTML5といえばCanvasという感じがしますが、どんなものなのでしょうか

※まだ途中までなので今後追加していく予定です

 

スポンサードリンク

 


 

Canvasとは?

簡単に言うと「HTML上に図を描ける要素」といえるでしょう

今までは、図を表示したい場合は画像を用意しなければいけませんでしたが

Canvasを使えばJavaScriptで好きな図なり絵なりを書けるようになります

 

しかし、いきなりCanvas要素を追加したとしても何も表示されない

デフォルトでは何の情報もないわけですね

まっさらなホワイトボードを宣言しただけなんで、ここに必要な情報を描いていきましょう

 

まずは宣言の仕方から

id属性はいいでしょう

JavaScriptでCanvasを操作するときに必要なのでつけておきます

なお、Canvas要素はそれぞれが独自に情報を保持するそうです

 

これで宣言は終わり

何かを描きこむにはJavaScriptが必要です

 

簡単な四角形を描いてみましょう

JavaScriptで以下のように書きます

これで四角形が描けました

 

では説明をば

まず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軸の値が大きくなります

zahyou

Canvasを使って作りました(デモページ

これを実際に作りながらCanvasの触り方を学んでいきます

 

・・・今日はここまで

スポンサードリンク

今後追加していきます

コメントを残す

メールアドレスが公開されることはありません。