HTML 5の表現力

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

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

HTML 5の機能追加② Drag&Drop API Geolocation API Web Workers Web Storage Web Database Web Sockets

Canvasタグとは ブラウザ上に、図や画像を描画するために策定された仕様従来はFlashやJavaのプラグインで実現していましたが、Canvasタグにより、JavaScriptのみで描画が可能に

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

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

2dコンテキストメソッド パスAPI 矩形色・スタイル状態変形ピクセル操作描画 opaqueオブジェクトテキスト

メソッド（パスAPI） arc() 円弧 arcTo() サブパスを繋ぐ円弧 beginPath() コンテキストのサブパスを０に bezierCurveTo() ベジェ曲線 clip() 描画領域のクリッピング closePath() パスを閉じる fill() 塗りつぶし isPointInPath() 座標がサブパス内にあるか判定 lineTo() 線分描画 moveTo() サブパスの開始点を指定 quadraticCurveTo() 二次曲線 rect() 四角形 stroke() サブパスに沿って線を描画

メソッド（矩形） clearRect() 矩形をクリア fillRect() 矩形の塗りつぶし strokeRect() 矩形の輪郭を描画

メソッド（色・スタイル） createLinearGradient() 線形グラデーション createPattern() 描画パターンの指定 createRadialGradient() 円形グラデーション

メソッド（状態） restore() スタックから描画状態を取り出し save() 現在の描画状態をスタックへ追加

メソッド（変形） rotate() 回転 scale() 拡大縮小 setTransform() translate() transform()

メソッド（ピクセル操作） getImageData() 矩形のピクセルをイメージとして取得 putImageData() イメージをピクセル描画

メソッド（描画） drawImage() 画像を描画

メソッド（opaqueオブジェクト） addColorStop() グラデーションの終点を指定

メソッド（テキスト） fillText() テキストの描画 strokeText() measureText() 文字列の描画幅を取得

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

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

おまけ W3C HTML5http://dev.w3.org/html5/spec/Overview.html HTML5.JPhttp://www.html5.jp/ Chrome Experimentshttp://www.chromeexperiments.com/

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

HTML 5の表現力