[HTML5] Canvas勉強メモ #1「基本構造」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

HTML5の特徴で一番フューチャーされているCanvas機能ですが、今までコンテンツの王者であったFlashをそのままコンバートできてしまうぐらいの機能なので、ちゃんと構造理解と各種スニペットなどを用意しておきたくなったので、勉強を兼ねてちゃんと理解しておこうと思います。

概要

以下のサイトで基礎は勉強できるます。

ドットインストール

HTML5 Canvas入門 (全17回)
Canvasでお絵かきアプリ (全8回)

基本的にはcanvasタグ内で展開できるイベントやアクションをJavaScriptで制御できるという事ですね。
もしかするとFlashと比較して覚えるといいのかもしれない。
タイムライン、イベント、コンテンツの扱い等など・・・

基本構造

index.html

簡単な図形の描画

canvas.js

解説

canvasタグ

「getContext(“2d”)」と記述して2次元記述できるキャンバスを定義します。

四角

strokeRect:線の描画
fillRect:塗りつぶし
clearRect:切り抜き(透明)

arc:座標X(3時の位置がデフォルト) , 座業Y , 半径サイズ , 開始角度 , 終了角度 , [true:時計回り , false:反時計回り]
stroke:線の描画
fill:塗りつぶし

Links

[HTML5] Canvas勉強メモ #1「基本構造」
[HTML5] Canvas勉強メモ #2「お絵かきツール」
[HTML5] Canvas勉強メモ #3「アニメーション」

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です