意味のわからない４・１６でした。と
では、勉強の記録をします。
ちなみに参考書籍はこれ↓
スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Andro.../クジラ飛行机
￥2,520
Amazon.co.jp
これと迷いました。
iPhone/iPad × HTML5アプリ制作/古籏 一浩
￥2,940
Amazon.co.jp
まずHTML5では、新しくタグが追加されました
【構造化関連タグ】
・header
・footer
・hgroup
・section
・article
・nav
・figure
・ａｓｉｄｅ
【画面描写・マルチメディア関連タグ】
・ｃａｎｖａｓ
・video
・audio
あとはいつかでてきますが
アプリケーションキャッシュとか
ジオロケーションとかでてきます。
べんり～
＜DOCTYPEの宣言＞
極端に短くなっていますね。
【以前】
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"＞
【HTML5】
＜!DOCTYPE html＞
なんとこれだけ
そうそう、これからは覚えておこうと思った画面サイズ
【iPhone3GS】
320*480
【iPhone4】
960*640
【iPad】
1024*768
※単位はピクセル
【canvas】
これをやってみたわけです
図形の描写が出来ちゃうんです
使い方の流れとしては
１．canvasオフじぇくとの取得
２．１．から描画用コンテキストを取得
３．コンテキストのメソッドやプロパティを利用して描画
という感じです。
１．キャンバスを用意して、どれを使うのか名前で選ぶ（宣言
２．かくものをげっとしちゃいますよと
３．座標などで絵をかいちゃおう
です。
こういうのって、使うときだけ分かればいいんですけどね。
覚える意味があまりないような気がするっていうか。
構造化するタグはおぼえて、使い慣れたほうがいいと思うんですがね。
【canvasオブジェクトの取得】
＜canvas id="test_canvas" width="300" height="300"＞＜/canvas＞
//idのところで、キャンバスに名前つけてます
＜script tyep="text/javascript"＞
var canvas = document.getElementById("test_canvas");
//で、どのキャンバス使おうかなーと宣言
.
.
＜/script＞
【描画用のコンテキストを取得】
var ctx = canvas.getContext("2d");
//2dと2次元の画像でして。将来的には3Dを、ということらしい
【いよいよ描写】
ctx.fillStyle = "rgb(255,0,0)";
//fillは塗りつぶし
//右辺は色の指定。ちなみにこれは赤
ctx.fillRect = (50,50,200,200);
//矩形（くけい）の描写
これで、四角形が描写できます。
これはぬりつぶしでしたね。
三角形を作りたいと思います
その場合は、
１．パスの指定を開始
２．座標で指定
３．パスの指定終了
４．描画
にかわります。
パスを使うわけです
＜canvas id="a_canvas" width="300" height="300"＞＜/canvas＞
＜script type="text/javascript"＞
var canvas = document.getElementById("a_canvas");
var ctx = canvas.getContext("2d");
//パスの指定開始
ctx.beginPath();
//start
ctx.moveTo(0,0);
ctx.lineTo(0,290);
ctx.lineTo(290,0);
//end
ctx.closePath();
//drowing
ctx.fillStyle="rgba(255,0,0,0.8)";
ctx.fill();
＜/script＞
このように座標で描画します。
rgbaは描画した図を半透明に出来ます。
さいごのaにあたる部分が透明度を表します。
０～１で指定してください。
今度の場合は、ctx.fill()がないと描画はされません。
storkeをつかうと、塗りつぶしではなく輪郭の描写に変わります。
つまり塗りつぶさない図形がつくれます。
【タッチした場所へ図形の描写】
iPhoneで、やってみました
できましたよ。
これはまたあとで書くことにします。では
スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Andro.../クジラ飛行机
￥2,520
Amazon.co.jp
iPhone/iPad × HTML5アプリ制作/古籏 一浩
￥2,940
Amazon.co.jp