動画じゃなくHTMLに絵を描き切るcanvasタグって何?

動画じゃなくHTMLに絵を描き切るcanvasタグって何?

本のまとめ

▼読んだ本は?

■ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!
■田中賢一郎さん
http://amzn.asia/d/i0KTIt6

▼HTML5で使えるcanvasタグって?

■線や矩形(正方形や長方形のこと)、円などを描けるタグ
■図形内の座標系(位置)を変換したり、図形内の一部分を切り抜いたりもできる

▼canvasで図形を描く時の前準備って?

【1】HTMLの中に、canvas要素を定義
└「width」と「height」の指定が必要

【2】Javascriptでcanvas要素への参照を取得

【3】描くための絵筆等を格納するコンテキストを取得
└以下の「ctx」が絵筆などの情報を格納するオブジェクトになる

【4】コンテキストに対して、描くためのプロバティを設定し変数に格納
└線や輪郭の色、塗りつぶしの色、線の幅などを指定

▼線や多角形を描く場合は?

▼矩形を描く場合は?

▼円を描く場合は?

▼文字を描く場合は?

▼画像データを配置する場合は?

▼canvasでの座標系の変換方法は?

■Canvasを使うと座標系を変換して、時計を回転させたりできる
■紙に時計を描いて、座標位置の変更をもとに、その紙を回転させていくようなイメージ
■例えば、以下のような流れ

思ったこと

HTML5とJavaScriptを使った、ゲームの作り方について書かれた本でした。

全部はびっくりするほど理解できなかったので、HTML5から新たに使えるようになった、図形をHTML内部に描画し、かつその座標を変換することでまるでその図形が動いているように見せられるcanvasタグについて主にまとめています。

これまで、WEB上で何かを描くときって、基本的には画像データや動画データをそのままごそっと乗っけていたけれど、canvasを使えば、直接タグを通じて描いた図形を動かせるって、なかなかすごいすね。

もちろん、ブラウザによって動き方にずれがあったり、動かし方に制限があったりと、まだまだ実験的な段階ではあるんだと思います。

でも、HTMLとJSだけで描けるってことは、その描画の中身もGoogleに読んでもらえる可能性も高まるし、今から手を出しておくのはありですね。

ありがとうございました!

関連する記事