2009年9月27日、アップルストア心斎橋で開催されたCSS Nite in OSAKA, Vol.19で、HTML5のcanvasを使った入門講座ということでスピーチしてきました。

canvasというのは、HTMLタグで、直接ブラウザに図形を表示させるためのタグで、まずは「線を引く」とか「塗りを入れる」など、シンプルな絵を描く方法を説明させていただいたあと、「HTML内のリスト化された数値を抜き取り、折れ線グラフを描画させる」とか、「ポイントをドラッグさせてベジェ曲線を操作する」など、canvasで出来る初歩的な仕様のご紹介をしました。

全てが自作のJavaScriptなので、勉強し始めて半月くらいしかない僕にとって「まだまだ」だとは思いますが、まだ知らない人にとって、お役に立てたら光栄です。

今日公開したスライドです、ダウンロードしてお使いください。
http://www.akibahideki.com/html5/cssnite0927/slide_0927.pdf
[PDF: 3.3MB]

HTML5とcanvasとJavaScriptが同一ファイルになっていて1ファイルで完結しているのでサンプルファイルも参考にしてください。

■HTML5 canvasに関する入門講座 ~CSS Nite in OSAKA, Vol.19~
http://www.akibahideki.com/html5/cssnite0927/

【内容】

• <input>要素のvalue属性の値を取得してcanvasの曲線に反映
• HTML内の情報を参照して図形化するcanvasの直線グラフ（線のみ）
• HTML内の情報を参照して図形化するcanvasの直線グラフ（塗り）
• HTML内の情報を参照して図形化するcanvasの直線グラフ（塗りの色、線の太さや色など）
• HTML内の情報を参照して図形化するcanvasの直線グラフ（ドロップシャドウ付き）
• ドラッグ操作によって描画するcanvasのベジェ曲線