月別: 2013年1月

canvasの文字へ影を描画
袋文字を影付きで描画するには
textAlignを設定する
textAlignを設定しないと自動的に
startになる
startは左揃えになる
ただし、注意点として、
startとendは
CSSの筆記方向に依存するので
もし、CSSで右から左になっていると
右揃えになる
textAlignで指定できる位置は
start
左揃え
left
左揃え
center
中央揃え
right
右揃え
end
右揃え
袋文字は少し透明にして描画
描画する図形やパスの不透明度は
globalAlphaプロパティで設定できる
数値は0~1.0で設定し
0なら透明
1.0なら不透明
0.5なら半分くらい透明
これらを設定したら影を描画
影を付けるのは文字だけじゃなく
画像とか図形にも付けられる
このため、設定を間違えると
文字だけじゃなく全部に影がつく
影を付けるなら、以下の4つのプロパティへ設定する
shadowColor
影の色
shadowBlur
ぼかし具合
shadowOffsetX
横のずらし具合をピクセル単位で設定
shadowOffsetY
縦のずらし具合をピクセル単位で設定

canvasへ文字を描画
canvasへ文字文字の描画ができるので
これを使えばテキストへグラデーションを付けたり
図形の変形もできる
描画できる文字は、通常の文字と
袋文字
袋文字は、輪郭を線で構成した文字のこと
文字を塗り潰す色、つまり文字の色は
fillStyleで指定する
なぜ、塗り潰すという表現になるかというと
ポスターなどの文字でレタリングで
中を塗り潰すのとおなじで文字を枠で描き
中身を塗り潰すから
描画する文字サイズや書体は、
fontプロパティで行う
設定はCSSとおなじ要領
コードにすると
context.font=”normal bold 64pt ‘italic'”;
ここまでで、下準備は完成
あとは、文字の描画
文字の描画には、fillText()を使う
fillText()の構文は
fillText(
“表示したい文字”,
X座標,
Y座標
)
となる
このときの注意点として、Y座標が
文字の一番上ではなく
ベースラインと呼ばれる位置を基準にしているということ
なのでYを0にすると
場合によっては下半分しかでないこともある
ベースラインの設定は
textBaselineプロパティで設定できる
例を書くと
top文字の一番上
hanging
一番上と真ん中の間
middle
文字の真ん中
alphabetic
真ん中とideographicの間
ideographic
alphabeticと一番したの間
bottom
一番下

Canvasでのグラデーション描画
Canvas 2D Context APIの種類は２つ
直線グラデーション
と
円形グラデーション
直線グラデーションは
上から下へだんどんと色が変わる
円形グラデーションは
内側から外側へ広がるように色が変わる
直線グラデーションの構文は
createLinearGradient(
始まりのx座標,
始まりのy座標,
終わりのx座標,
終わりのy座標
)
円形グラデーションの構文は
createRadialGradient(
内側の円のx座標,
内側の円のy座標,
内側の円の半径
外側の円のx座標,
外側の円のy座標,
外側の円の半径
)
となる
円形グラデーションは内側の円から
外側の円へ向かうので
内側が始まり、外側が終わりと考えるとわかりやすい
また
canvas手は、グラデーションは塗り扱いなので
fillStyleプロパティへグラデーションを指定する
ただし、直接色の指定はできないため
グラデーションオブジェクトを設定する
このグラデーションオブジェクトを生成するのが
createLinearGradient()
や
createRadialGradient()
になる
グラデーションにするには、いくつか色の指定が必要
この色を設定するのが
addColorStop()
addColorStop()のパラメータは
位置と色
つまり
addColorStop(位置,色)
となる
位置は、0~1.0で指定
0は開始位置
1.0が終了位置
もし、半分なら0.5になる
色は、redとこのCSSて指定するときと同じ
もし、白から黄色、赤へ変わるように設定するなら
gradObj.addColorStop(0,”white”);
gradObj.addColorStop(0.5,”yellow”);
gradObj.addColorStop(“red”);
となる
設定が、できたら
グラデーションオブジェクトをfillStyleへ代入
後は図形を作成して塗りつぶせばグラデーションが完了する
また、一度作成したグラデーションオブジェクトは
使い回しが可能

ほかのcanvasへ描かれた内容の描画
CanvasそのものをCanvasへ画像として
描画するには
drawImage()の最初のパラメータへ
canvas要素を指定する
canvas要素で透明になっている部分も反映されるため
複数のcanvasを合成させることもできる
お絵かきアプリとかではこういった
機能を使うことで実装可能

映像をCanvasへ描画
Canvasへ映像を描画するには
drawImage()の最初のパラメータに
video要素を指定するだけ
document.getElementById(“draw4”).addEventListener(“click”,fuction(){
var videoObj=document.getElementById(“myvideo”);
context.drawImage(videoObj,220,10);
},true);
忘れないように解説メモ
drawImage()のパラメータは
今回は、左から
video要素を格納した変数
横幅
縦幅
要素のidを変数へ格納しておくと使いやすい
これの使い道は
Webアプリなどで
サムネイル作成とかにつかえる
あと、注意点として
本来、映像は時間経過に伴い変化するが
Canvasへ描画されたものは
その中の一瞬の画像
ゲームとかのサンプル画像みたいなかんじ
これが、フレーム
描画するフレームを指定するには
videoオブジェクトの
currentTimeプロパティを使う

クリッピング領域内へ画像を描画
クリッピング領域を指定してから
drawImage()を呼び出すと
クリッピング領域内に画像が描画される
では、ソース
document.getElementById(“draw3”).addEventListener(“click”,fuction(){
context.save(); //状態保存
context.beginPath();
context.strokeStyle=”orange”; //色指定
//クリッピング領域指定
/*arcで円を描く
パラメータは
中心x座標
中心y座標
半径
開始角度
終了角度
(角度はラジアンなので、180度=π
Math.PIでπになる
もし、円を描くなら
Math.PI*2
となる)
フラグ(trueなら時計まわり、falseなら反時計まわり)
context.arc(360,270,60,0,Math.PI*2,false);
context.clip();
context.drawImage(imageObj,300,20);
context.restore();
},true);

画像の一部を指定して描画
この手法で、画像の一部を拡大表示などができる
やり方は
drawImage()でパラメータを指定する
パラメータは左から
画像オブジェクト
抜き出す部分のx座標
抜き出す部分のy座標
抜き出す部分の横幅
抜き出す部分の縦幅
表示する部分のx座標
表示する部分のy座標
表示する部分の横幅
表示する部分の縦幅
となる

画像の幅指定で描画
画像の幅を指定して描画する方法
drawImage()では
パラメータの数が5つの場合
座標と描画幅を指定したと判断されふ
このように、drawImage()はパラメータの数で挙動が変わる
パラメータは左から
画像オブジェクト
x座標
y座標
横幅
縦幅
となる
横幅、縦幅は、ピクセルのみ指定できる