Linux & Android Dialy

円弧の描画
円弧もbeginPath()で新規にパスを指定し
arc()を呼び出す
arc()には6つのパラメータが必要で
左から解説すると
中心X座標
中心Y座標
半径
開始角度
終了角度
反時計まわりにするか判別するプラグ
となる
注意点は
開始角度と終了角度は
45度とか135度とかみたいに
度=degreeではないということ
指定するとにきはラジアンで指定する
ラジアンは
180度でπ
360度なら2π
となる
Javascriptなら
πは
Math.PI
というように指定できる
もし、終了角度をMath.PIにすると
半円になる
この円を描く向きを決めるのが
arc()のパラメータのフラグ
これがtrueなら時計まわり
falseなら反時計まわりとなる
つまり、フラグがtrueなら
上の半円となる

canvasで三角形描画
三角形は始点と終点がおなじになるので
closePath()を使えば、
最後に描画した座標と開始点を直線で結べる
closePath()は
パスを閉じるためのメソッド
beginPath()で生成されたパスは
closePath()でひとまとめにされる
三角形ときにclosePath()
直線もclosePath()
なのは
パスには2種類あり
オープンパス
クローズパス
がある
オープンパスは
パスの始点と終点が結ばれていない
クローズパスは始点と終点が結ばれた状態
となる

四角形描画メソッドについて
rect()
fillrect()
strokeRect()
clearRect()
いずれもパラメータは同じ
左から順番に
x座標
y座標
横幅
縦幅
となる
strokeRect()は
四角形の枠だけ描画
fillRect()は
塗りつぶした四角形を描画する
まず、塗りつぶした四角形から
これはfillRect()を使う
まず最初に塗りつぶす色を決める
やり方は
コンテキストのfillStyleプロパティへ
カラー名やカラーコードを指定
ソースにす？と
context.fillStyle=”black”;
色が決まったら
fillRect()で四角形描画
全体を塗りつぶしたいなら
描画開始座標は
0,0
横幅は canvasObj.width
縦幅は canvasObj.height
これでok
ソースにすると
context.fillRect(0,0,canvasObj.width,canvasObj.height);
次は枠だけの四角形描画
これにはstrokeRect()を使う
fillRect()は塗りつぶす色だけど
strokeRect()は枠の色を決める
まぁ色を先に決めるのは変わらん
で、線の色の指定は
コンテキストのstrokeStyleプロパティへ
カラー名やカラーコードを指定
あと、枠なので、線の太さを指定する
これは
lineWidthで指定
ソースにすると
context.lineWidth=10;
単位はピクセル限定
ちなみに、細かく小数点で指定もできる
あとは
strokeRect()で描画する
引数は左から
開始のx,y座標と
横幅
縦幅　
となる

四角形描画メソッド
rect()
fillrect()
strokeRect()
clearRect()
いずれもパラメータは同じ
左から順番に
x座標
y座標
横幅
縦幅
となる
strokeRect()は
四角形の枠だけ描画
fillRect()は
塗りつぶした四角形を描画する

FileAPIのメモ
ファイルの読み込みは
Fileオブジェクト、FileReaderを使う
選択されたファイルはfiles配列へ入る
テキストファイルの読み込みは
readAsText()
バイナリファイルの読み込みは
readAsBinaryString()
画像、映像ファイルなら
readDataURL()
を使う
バイナリデータ読みだしには
charCodeAt()など文字列処理メソッドが使える

ブラウザーの読み込み容量限界
バイナリデータは、ブラウザーにより限界容量が違う
ほとんどは4GBまでok
だけどchromeは2GB
FileAPIの仕様では
4GB以上でも可能だけど
ブラウザーにより限界容量があるため、
設計するときには注意が必要となる

エラー処理
ファイル読み込み失敗すると
onerrorへ
設定したイベントハンドラが呼び出される
このイベントハンドラに渡される
Eventオブジェクトのtarget.error.codeへ
エラーコードが入る
エラーコードは以下の通り
1
ファイルが見つからない
2
セキュリティーエラー
3
読み込みが中断
4
読み込めない
5
エンコーデイングが間違っている