アプリ映像10 (HTML5 API 2)
2013/3/28 19:06 | Category アプリ開発実践フェーズ | Comment (0)
■HTML5 API
(5)Canvas sample2 ～ パス(四角)を表示 ～ 【HTML5_API/canvas_sikaku.html】
ctx.beginPath();
ctx.rect(10,10,40,40);
//塗りつぶし
ctx.fillStyle = “f00″;
ctx.stroke();
ctx.closePath(); // 描画してパスが閉じている場合は、何もしない
(6)Canvas sample3 ～ 円を表示 ～ 【HTML5_API/canvas_arc.html】
//パスの開始
ctx.beginPath();
//色指定
ctx.fillStyle = “#f00″;
//線の太さ
ctx.lineWidth=5;
//円の設定（座標、半径、円のスタートとエンド、回転）
ctx.arc( 100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false); // full circle
//描画
ctx.fill();
ctx.closePath();
(7)Canvas sample3 ～ 線を描画 ～ 【HTML5_API/canvas_line.html】
●lineCapプロパティ
http://www.html5.jp/canvas/ref/property/lineCap.html
▲三角形を描画 【HTML5_API/canvas_sankaku.html】
//色指定
ctx.strokeStyle = “#000″; //need list of available colors
//線の太さ
ctx.lineWidth = 10;
//線の端の形状
ctx.lineCap = ”; // round | butt
//パスの開始
ctx.beginPath();
//始点
ctx.moveTo( 20, 200);
ctx.lineTo( 200, 200);
ctx.lineTo( 100, 20);
ctx.lineTo( 20, 200);
//自動的に閉じてくれる
ctx.closePath();
//描画
ctx.stroke();
※クローズしないと、閉じた部分の線がキレイにならない！！！
(8)audio 【HTML5_API/audio/audio.html】