HTML5の特徴で一番フューチャーされているCanvas機能ですが、今までコンテンツの王者であったFlashをそのままコンバートできてしまうぐらいの機能なので、ちゃんと構造理解と各種スニペットなどを用意しておきたくなったので、勉強を兼ねてちゃんと理解しておこうと思います。
概要
以下のサイトで基礎は勉強できるます。
ドットインストール
HTML5 Canvas入門 (全17回)
Canvasでお絵かきアプリ (全8回)
基本的にはcanvasタグ内で展開できるイベントやアクションをJavaScriptで制御できるという事ですね。
もしかするとFlashと比較して覚えるといいのかもしれない。
タイムライン、イベント、コンテンツの扱い等など・・・
基本構造
index.html
<!DOCTYPE html>
<html lang="js">
<head>
<meta charset="utf-8">
<title>canvas plactice</title>
</head>
<body>
<h1>CanvasPlactice</h1>
<canvas id="mycanvas" width="400" height="200">
not canvas
</canvas>
<script src="canvas.js"></script>
</body>
</html>
var ctx = document.getElementById("mycanvas").getContext("2d");
ctx.strokeRect(10,10,50,50);
簡単な図形の描画
canvas.js
//描画するcanvasタグを選択
var ctx = document.getElementById("mycanvas").getContext("2d");
//四角形の枠線描画
ctx.strokeRect(10,10,40,40);
//四角形の塗りつぶし
ctx.fillRect(60,10,40,40);
//四角形の透明エリアを描画（既に描画されている上に追記する）
ctx.fillRect(110,10,60,60);
ctx.clearRect(120,20,40,40);
//丸型の枠線描画
ctx.beginPath();
ctx.arc(30,130,20, 0/180*Math.PI , 360/180*Math.PI);
ctx.stroke();
//丸型の塗りつぶし
ctx.beginPath();
ctx.arc(80,130,20, 0/180*Math.PI , 360/180*Math.PI);
ctx.fill();
解説
canvasタグ
「getContext("2d")」と記述して2次元記述できるキャンバスを定義します。
四角
strokeRect：線の描画
fillRect：塗りつぶし
clearRect：切り抜き（透明）
丸
arc：座標X(3時の位置がデフォルト) , 座業Y , 半径サイズ , 開始角度 , 終了角度 , [true:時計回り , false:反時計回り]
stroke：線の描画
fill：塗りつぶし
