Transcript HTML 5.0の表現力 - 楽しいアプリ制作の会 [たのアプ]

HTML 5の表現力
楽しいアプリ制作の会
TWorks
蜜葉
Silverlightと楽しいアプリ勉強会 vol.1
HTML 5の機能追加①
•
•
•
•
•
•
HTML 5マークアップ の追加/廃止
Video/Audio対応
Canvasタグ
Formの強化
アプリケーションキャッシュ
クロスドキュメントメッセージング
Silverlightと楽しいアプリ勉強会 vol.1
HTML 5の機能追加②
•
•
•
•
•
•
Drag&Drop API
Geolocation API
Web Workers
Web Storage
Web Database
Web Sockets
Silverlightと楽しいアプリ勉強会 vol.1
Canvasタグとは
• ブラウザ上に、図や画像を描画するため
に策定された仕様
• 従来はFlashやJavaのプラグインで実現し
ていましたが、Canvasタグにより、
JavaScriptのみで描画が可能に
Silverlightと楽しいアプリ勉強会 vol.1
Canvasタグ①
• こんな感じで書きます
<canvas id="canvas1" width="300" height="300">
Canvasに対応していないブラウザです。
</canvas>
Silverlightと楽しいアプリ勉強会 vol.1
Canvasタグ②
window.onload = function() {
// img要素を作成
var image = document.createElement("img");
// 画像の読み込みが完了したら
image.onload = function() {
var canvas = document.getElementById("canvas1");
// 描画コンテキストを取得
var ctx = canvas.getContext("2d");
// 画像を描画
ctx.drawImage(image, 0, 0);
// 画像を半透明にし、画像を反転させて描画
ctx.globalAlpha = .1;
ctx.transform(1, 0, 0, -1, 0, image.height * 2);
ctx.drawImage(image, 0, 0);
};
// 画像のURLをセットし、読み込み開始
image.src = "./images/hogehoge.gif";
}
Silverlightと楽しいアプリ勉強会 vol.1
2dコンテキスト メソッド
•
•
•
•
•
•
•
•
•
パスAPI
矩形
色・スタイル
状態
変形
ピクセル操作
描画
opaqueオブジェクト
テキスト
Silverlightと楽しいアプリ勉強会 vol.1
メソッド（パスAPI）
•
•
•
•
•
•
•
•
•
•
•
•
•
arc()
arcTo()
beginPath()
bezierCurveTo()
clip()
closePath()
fill()
isPointInPath()
lineTo()
moveTo()
quadraticCurveTo()
rect()
stroke()
円弧
サブパスを繋ぐ円弧
コンテキストのサブパスを０に
ベジェ曲線
描画領域のクリッピング
パスを閉じる
塗りつぶし
座標がサブパス内にあるか判定
線分描画
サブパスの開始点を指定
二次曲線
四角形
サブパスに沿って線を描画
Silverlightと楽しいアプリ勉強会 vol.1
メソッド（矩形）
• clearRect()
• fillRect()
• strokeRect()
矩形をクリア
矩形の塗りつぶし
矩形の輪郭を描画
Silverlightと楽しいアプリ勉強会 vol.1
メソッド（色・スタイル）
• createLinearGradient()
• createPattern()
• createRadialGradient()
線形グラデーション
描画パターンの指定
円形グラデーション
Silverlightと楽しいアプリ勉強会 vol.1
メソッド（状態）
• restore()
• save()
スタックから描画状態を取り出し
現在の描画状態をスタックへ追加
Silverlightと楽しいアプリ勉強会 vol.1
メソッド（変形）
•
•
•
•
•
rotate()
scale()
setTransform()
translate()
transform()
回転
拡大縮小
Silverlightと楽しいアプリ勉強会 vol.1
メソッド（ピクセル操作）
• getImageData()
• putImageData()
矩形のピクセルをイメージとして取得
イメージをピクセル描画
Silverlightと楽しいアプリ勉強会 vol.1
メソッド（描画）
• drawImage()
画像を描画
Silverlightと楽しいアプリ勉強会 vol.1
メソッド（opaqueオブジェクト）
• addColorStop()
グラデーションの終点を指定
Silverlightと楽しいアプリ勉強会 vol.1
メソッド（テキスト）
• fillText()
• strokeText()
• measureText()
テキストの描画
文字列の描画幅を取得
Silverlightと楽しいアプリ勉強会 vol.1
Canvas/Videoの実践
ここからは蜜葉たんが、ブロック崩しを
作ります。もちろんCanvasを使います。
このブロック崩しでは
• Canvas#rect()
• Canvas#circle()
• Canvas#drawImage()
• Video#play()
を使います。
Silverlightと楽しいアプリ勉強会 vol.1
終わりに
• Video#play()とjQuery#play()がかぶっていま
す。そのため$(“#sampleVideo”).play() と書
くとjQuery#play() が実行されてしまい、エ
ラーになりました。
• 今日紹介した内容は、HTML 5のほんの一部分
です。
• いろいろサンプルが公開されています。いろい
ろな可能性を見つけてください。
• HTML 5は現在ドラフトで、機能面はまだまだ
変わって行くかもしれません。勧告は2010年の
予定です。
Silverlightと楽しいアプリ勉強会 vol.1
おまけ
•
W3C HTML5
http://dev.w3.org/html5/spec/Overview.html
•
HTML5.JP
http://www.html5.jp/
•
Chrome Experiments
http://www.chromeexperiments.com/
Silverlightと楽しいアプリ勉強会 vol.1
ご清聴、ありがとうございました。