canvasの文字へ影を描画

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
縦のずらし具合をピクセル単位で設定

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です