HTML 5の表現力 楽しいアプリ制作の会 TWorks 蜜葉.

Presentation on theme: "HTML 5の表現力 楽しいアプリ制作の会 TWorks 蜜葉."— Presentation transcript:

1 HTML 5の表現力 楽しいアプリ制作の会 TWorks 蜜葉

2 HTML 5の機能追加① HTML 5マークアップ の追加/廃止 Video/Audio対応 Canvasタグ Formの強化
アプリケーションキャッシュ クロスドキュメントメッセージング

3 HTML 5の機能追加② Drag&Drop API Geolocation API Web Workers Web Storage
Web Database Web Sockets 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

4 Canvasタグとは ブラウザ上に、図や画像を描画するために策定された仕様
従来はFlashやJavaのプラグインで実現していましたが、Canvasタグにより、JavaScriptのみで描画が可能に 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

5 Canvasタグ① こんな感じで書きます <canvas id="canvas1" width="300" height="300"> 　　Canvasに対応していないブラウザです。 </canvas>

6 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"; }

7 2dコンテキスト メソッド パスAPI 矩形 色・スタイル 状態 変形 ピクセル操作 描画 opaqueオブジェクト テキスト
沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

8 メソッド（パスAPI） arc() 円弧 arcTo() サブパスを繋ぐ円弧 beginPath() コンテキストのサブパスを０に
bezierCurveTo() ベジェ曲線 clip() 描画領域のクリッピング closePath() パスを閉じる fill() 塗りつぶし isPointInPath() 座標がサブパス内にあるか判定 lineTo() 線分描画 moveTo() サブパスの開始点を指定 quadraticCurveTo() 二次曲線 rect() 四角形 stroke() サブパスに沿って線を描画 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

9 メソッド（矩形） clearRect() 矩形をクリア fillRect() 矩形の塗りつぶし strokeRect() 矩形の輪郭を描画
沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

10 メソッド（色・スタイル） createLinearGradient() 線形グラデーション
createPattern() 描画パターンの指定 createRadialGradient() 円形グラデーション 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

11 メソッド（状態） restore() スタックから描画状態を取り出し save() 現在の描画状態をスタックへ追加
沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

12 メソッド（変形） rotate() 回転 scale() 拡大縮小 setTransform() translate()
沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

13 メソッド（ピクセル操作） getImageData() 矩形のピクセルをイメージとして取得
putImageData() イメージをピクセル描画 沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

14 メソッド（描画） drawImage() 画像を描画
沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

15 メソッド（opaqueオブジェクト） addColorStop() グラデーションの終点を指定
沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

16 メソッド（テキスト） fillText() テキストの描画 strokeText() measureText() 文字列の描画幅を取得
沢山あります。時間の都合で全部の説明は出来ません。今回は「表現力」ということで、それに関係するタグを中心に説明します。

17 Canvas/Videoの実践 ここからは蜜葉たんが、ブロック崩しを 作ります。もちろんCanvasを使います。 このブロック崩しでは
Canvas#rect() Canvas#circle() Canvas#drawImage() Video#play() を使います。

18 終わりに Video#play()とjQuery#play()がかぶっています。そのため$(“#sampleVideo”).play() と書くとjQuery#play() が実行されてしまい、エラーになりました。 今日紹介した内容は、HTML 5のほんの一部分です。 いろいろサンプルが公開されています。いろいろな可能性を見つけてください。 HTML 5は現在ドラフトで、機能面はまだまだ変わって行くかもしれません。勧告は2010年の予定です。

19 おまけ W3C HTML5 http://dev.w3.org/html5/spec/Overview.html
HTML5.JP Chrome Experiments

20 ご清聴、ありがとうございました。