HTML5 はじめました。

はじめまして HTML5

いままでほっといてごめんね

まずはここからだよね
HTML5.jp

タグリファレンス | HTML5.jp

■ Canvas

　HTML5 と言えばなんといっても Canvas!

　Canvasとは | HTML5.jp

　"Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。"

　ほぉー。知らなかった。

　"Canvasに関しては、Safari1.3以降、Opera9以降、Firefox1.5以降ですでに実装されています。"

　ふむ。

　"もっともブラウザシェアが高いInternet ExplorerはCanvasに対応していません。"
　"GoogleがExplorerCanvasというJavaScriptライブラリを公開"
　"ExplorerCanvasは、Internet ExplorerでCanvasをエミュレートするJavaScriptライブラリ"
　"ExplorerCanvasは、Internet Explorer 6以上で動作"

　これを使うと、あたかも Internet Explorer に Canvasが実装されて
　いるかのようにすることができるようになるのね。

　"Canvasの仕様には、アニメーションのメソッドがありません。もしアニメーションを実現したい場合は、一コマずつ、図を描きなおすという処理を繰り返さなければいけません。"

　はい。


　● ツール

　　リアルタイムにコード結果をみれる

　　　http://jsdo.it/

　　を使いました。

　　　http://www.rendur.com/
　　
　　でもできるのかな？？

　● 書いてみる

　　Canvasの使い方 | HTML5.jp

　　Canvasリファレンス | HTML5.jp

　　★ 図形の描画

view plainprint?

1.  /* 2Dコンテキスト */  
2.  var ctx = canvas.getContext('2d');  
3.   
4.  /* パスの開始 */  
5.  ctx.beginPath();  
6.   
7.  /* 移動 */  
8.  ctx.moveTo(x, y);  
9.   
10.  /* 線を描画 */  
11.  ctx.lineTo(x, y);  
12.   
13.  /* パスを閉じる */  
14.  ctx.closePath();  
15.   
16.  /* 枠線を描画 */  
17.  ctx.stroke();  
18.   
19.  /* 塗りつぶし */  
20.  ctx.fill();  
21.   
22.  /* 矩形を描画 */  
23.  ctx.rect(x1, y1, x2, y2);  
24.   
25. /* 円弧を描画: 0[rad] は x座標 */  
26.  ctx.arc(x, y, radius, startAngle[rad], endAngle[rad], anticlockwise[true/false]);  
27.   
28.  /* 二次曲線 */  
29.  ctx.quadraticCurveTo(x1, y1, x2, y2);  
30.   
31.  /* ベジェ曲線 */  
32.  bezierCurveTo(x1, y1, x2, y2);  
33.   
34.  /* 塗りつぶした矩形 */  
35.  ctx.fillRect(x, y, width, height)  
36.   
37.  /* 枠線のみの矩形 */  
38.  ctx.strokeRect(x, y, width, height)  
39.   
40. /* 矩形を削除 : 削除された部分は透明になる */  
41.  ctx.clearRect(x, y, width, height)  

  /* 2Dコンテキスト */
  var ctx = canvas.getContext('2d');

  /* パスの開始 */
  ctx.beginPath();

  /* 移動 */
  ctx.moveTo(x, y);

  /* 線を描画 */
  ctx.lineTo(x, y);

  /* パスを閉じる */
  ctx.closePath();

  /* 枠線を描画 */
  ctx.stroke();

  /* 塗りつぶし */
  ctx.fill();

  /* 矩形を描画 */
  ctx.rect(x1, y1, x2, y2);

　/* 円弧を描画: 0[rad] は x座標 */
  ctx.arc(x, y, radius, startAngle[rad], endAngle[rad], anticlockwise[true/false]);

  /* 二次曲線 */
  ctx.quadraticCurveTo(x1, y1, x2, y2);

  /* ベジェ曲線 */
  bezierCurveTo(x1, y1, x2, y2);

  /* 塗りつぶした矩形 */
  ctx.fillRect(x, y, width, height)

  /* 枠線のみの矩形 */
  ctx.strokeRect(x, y, width, height)

　/* 矩形を削除 : 削除された部分は透明になる */
  ctx.clearRect(x, y, width, height)

　　★ 色の指定

view plainprint?

1. /* 枠線の色を指定 : CSSで指定するフォーマットに対応 */  
2. ctx.strokeStyle = color  
3.   
4. /* 塗りつぶす色を指定 : CSSで指定するフォーマットに対応 */  
5. ctx.fillStyle = color  
6.   
7. /* 例  rgb(int red, int green, int blue) */  
8. ctx.fillStyle = 'rgb(192, 80, 77)';  
9.   
10. /* アルファ（透明度）を指定する */  
11. /* rgba(int red, int green, int blue, int alpha) */  
12. /* alpha : [0-1]  0:透明  1:不透明 */  
13. ctx.fillStyle = 'rgba(192, 80, 77, 0.7)';  
14.   
15. /* Canvas上で合成される前に図形や画像に適用するためのアルファ値をセット */  
16. ctx.globalAlpha = 0.7;  

  /* 枠線の色を指定 : CSSで指定するフォーマットに対応 */
  ctx.strokeStyle = color

  /* 塗りつぶす色を指定 : CSSで指定するフォーマットに対応 */
  ctx.fillStyle = color

  /* 例  rgb(int red, int green, int blue) */
  ctx.fillStyle = 'rgb(192, 80, 77)';

  /* アルファ（透明度）を指定する */
  /* rgba(int red, int green, int blue, int alpha) */
  /* alpha : [0-1]  0:透明  1:不透明 */
  ctx.fillStyle = 'rgba(192, 80, 77, 0.7)';

  /* Canvas上で合成される前に図形や画像に適用するためのアルファ値をセット */
  ctx.globalAlpha = 0.7;

globalAlpha の使い方

view plainprint?

1. var ctx = canvas.getContext('2d');  
2.   
3. /* 半透明度を指定 */  
4. ctx.globalAlpha = 0.7;  
5.   
6. /* 円 */  
7. ctx.beginPath();  
8. ctx.fillStyle = 'rgb(192, 80, 77)'; // 赤  
9. ctx.arc(70, 45, 35, 0, Math.PI*2, false);  
10. ctx.fill();  
11. /* 矩形 */  
12. ctx.beginPath();  
13. ctx.fillStyle = 'rgb(155, 187, 89)'; // 緑  
14. ctx.rect(20, 20, 50, 50);  
15. ctx.fill();  

  var ctx = canvas.getContext('2d');

  /* 半透明度を指定 */
  ctx.globalAlpha = 0.7;

  /* 円 */
  ctx.beginPath();
  ctx.fillStyle = 'rgb(192, 80, 77)'; // 赤
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);
  ctx.fill();
  /* 矩形 */
  ctx.beginPath();
  ctx.fillStyle = 'rgb(155, 187, 89)'; // 緑
  ctx.rect(20, 20, 50, 50);
  ctx.fill();

　　★ 線の幅を変える

view plainprint?

1. /* 線の幅を変える */  
2. ctx.lineWidth(width);  

  /* 線の幅を変える */
  ctx.lineWidth(width);

　　★ 線形グラデーションの指定

view plainprint?

1. CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1);  
2. CanvasGradient.addColorStop(offset, color);  

　　CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1);
　　CanvasGradient.addColorStop(offset, color);

　　createLinearGradient(x0, y0, x1, y1)
　　　　x0, y0 : グラデーションの開始地点
　　　　x1, y1 : グラデーションの終了地点

　　addColorStop(offset, color)
　　　　グラデーション全体から見たoffsetの地点で、新たな終点セットする

　　　　例外 :
　　　　offsetが0未満または1より大きい値の場合: INDEX_SIZE_ERR例外

　　　　colorがCSS色として構文解析できない場合: SYNTAX_ERR例外

　　注意: Safari 2.0の場合、fillRectメソッドで描画される図形には
　　　　　グラデーションが効かないという問題があるそうです。
　　　　　なので、x fillRect() o drawRect() + fill()


　　★ 円形グラデーションの指定

view plainprint?

1. anvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);  
2. anvasGradient.addColorStop(offset, color);  

　　
　　anvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
　　anvasGradient.addColorStop(offset, color);

　　
　　createRadialGradient(x0, y0, r0, x1, y1, r1)
　　　　x0, y0 : 1つ目の円の中心座標
　　　　r0 : 1つ目の円の半径
　　　　x1, y1 : 2つ目の円の中心座標
　　　　r1 : 2つ目の円の半径
　　

　　★ 画像を組み込む

　　ctx.drawImage(image, dx, dy)
　　　image に格納されたImageオブジェクトを描画

　　　dx, dy : 左上端

　　ctx.drawImage(image, dx, dy, dw, dh)
　　　image に格納されたImageオブジェクトを dw x dh に伸縮して描画

　　　dx, dy : 左上端
　　　dw, dh : 横幅、縦幅

　　ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
　　　image に格納されたImageオブジェクトを、トリミング＆伸縮して描画

　　　sx, sy : トリミング開始位置
　　　sw, sh : トリミング横幅、縦幅
　　　dx, dy : 左上端
　　　dw, dh : 横幅、縦幅


　　　！drawImageメソッドを呼び出す前に、画像のロードが
　　　　完了するようにしなければいけない

view plainprint?

1. var ctx = canvas.getContext('2d');  
2. /* Imageオブジェクトを生成 */  
3. var img = new Image();  
4. img.src = "image2.gif?" + new Date().getTime(); /* for IE */  
5. /* 画像が読み込まれるのを待ってから処理を続行 */  
6. img.onload = function() {  
7.   ctx.drawImage(img, 0, 0);  
8. }  

  var ctx = canvas.getContext('2d');
  /* Imageオブジェクトを生成 */
  var img = new Image();
  img.src = "image2.gif?" + new Date().getTime(); /* for IE */
  /* 画像が読み込まれるのを待ってから処理を続行 */
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  }

　　★ 変形

　　・scale()

　　・rotate()

　　・translate()

　　・transform()

　　・setTransform()




■ 関連サイト＆資料

・http://www.slideshare.net/myakura/html5-web-platform

・HTML5 Japanese Interest Group

・HTML5の機能を知るための15のデモンストレーション

・これは見ておくべきHTML5のCanvasを使ったデモ集:phpspot開発日誌

・http://9elements.com/io/projects/html5/canvas/

・Mozilla Developer Network

・「A Basic RayCaster」

・Puzzles using Canvas

・Canvascape - "3D Walker"

・Apple - HTML5 and web standars

・[html5] - 超自己満足プログラミング -

・Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies |　caniuse.com


■ GTUG での HTML5 セッションのときのメモ（いつのか忘れちゃった ><）

　● HTML5 の特徴

　　・セマンティックな構造化言語へと進化
　　・フォーム機能の大幅な強化
　　・Web アプリケーション開発向け機能の強化


　● セマンティックってなに？

　　HTML5では情報を構造化するための新しい要素や属性が追加されている。

　　例えば、以下の要素などが挙げられる。
　　　・文章などのセクションを定義する「section 要素」
　　　・ヘッダエリアを定義する「header 要素」
　　　・フッタエリアを定義する「footer 要素」
　　　・ナビゲーションエリアを定義する「nav 要素」

　● フォーム機能の大幅な強化

　　HTML5では、問い合わせや商品購入などでユーザーが情報を
　　入力する際に用いるフォーム機能が、大幅に強化されている。

　　例えば、以下のような強化点が挙げられる。
　　　・必須入力フィールドかどうかを指定することができる「required 属性」
　　　・未入力のテキストフィールドに、文字入力の手助けとなる文字列を
　　　　あらかじめ表示できる「placeholder 属性」
　　　・入力を開始する箇所を自動的にフォーカスすることができる
　　　　「autofocus 属性」


■メモ

　・noVNC | github
　
　・http://www.hunlock.com/

　・http://www.akibahideki.com/blog/html5-canvas/

　・HTML5 Canvas Cheat Sheet

　・HTML5 Gallery | A showcase of sites using HTML5 markup

　・Dive Into HTML5

　・HTML5 Canvas and Audio Experiment

　・HTML 5 Cheat Sheet

　・Modernizr

　・jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas
　
　・70 Must-Have CSS3 and HTML5 Tutorials and Resources | Web Resources | WebAppers