今回はcanvasで描画したグラフィックに色やスタイルの指定と、テキストの描画方法をご紹介致します。スタイルの指定は、色、グラデーション、パターンが指定できます。そのため、画像を使わずとも角丸のグラデーションボタンなども描画出来るようになります。
塗りつぶしのスタイル
canvasに描画したグラフィックのメソッド、『stroke()』、『strokeRect()』、『fill()』、『fillRect』などはそれぞれ『strokeStyle』、『fillStyle』プロパティでグラフィックの色、スタイルを指定できます。
・CSSカラー
・グラデーション(CanvasGradient)
・パターン(CanvasPattern)
CSSカラー
色の指定方法はCSS3の方法をすべて使用することができます。（詳細はこちら）また、なにも指定しなかった場合は黒く塗りつぶされます。
例：赤の指定
style="color:red;" style="color:FF0000;" style="color:hsl(0, 100%, 50%);" style="color:hsla(0, 100%, 50%, 1);" style="color:rgb(255,0,0);" style="color:rgba(255,0,0,1);"
グラデーション(CanvasGradient)の指定
グラデーションを利用するとき、線形グラデーションと円形グラデーションの2種類を使用することができます。線形グラデーションを使用するには、『createLinearGradient()』を使用します。円形グラデーションを使用するには、『createRadialGradient()』を使用します。
//線形グラデーションの作成 createLinearGradient(x0, y0, x1, y1) /*(x0, y0)で指定した座標から(x1, y1)座標に向かって直線に色が変化。*/ //円形グラデーションの作成 createRadialGradient(x0, y0, r0, x1, y1, r1) /*(x0, y0)を中心とした半径(r0)とする円と、(x1, y1)を中心とした半径(r1)を半径とした円の間がグラデーションで塗りつぶされる。
メソッドを呼び出しますと戻り値として『CanbasGradient型』のオブジェクトを取得できます。オブジェクトはグラデーションの境界線色を指定するため、『addColorStop()』というメソッドを持っています。
//境界線色指定 addColorStop(offset, color)
『offset』には『0.0』から『1.0』を指定します。0.0は始点、1.0は終点を表します。colorはCSSカラーを文字列で指定できます。
・線形グラデーション
//Gradient //線形グラデーションの作成 var grd = sqr.createLinearGradient(0, 0, 200, 0); //境界線左端の色指定 grd.addColorStop(0, "white"); //境界線右端の色指定 grd.addColorStop(1.0, "blue"); //塗りつぶしのグラデーション sqr.fillStyle = grd; //canvas塗りつぶし sqr.fillRect(0, 0, 200, 200);
・円形グラデーション
//円形グラデーションの作成 var grd = sqr.createRadialGradient(40, 40, 0, 50, 50, 200); //境界線左端の色指定 grd.addColorStop(0, "white"); //境界線右端の色指定 grd.addColorStop(1.0, "blue"); //塗りつぶしのグラデーション sqr.fillStyle = grd; //円を描画 sqr.arc(50, 50, 50, 0, 2 * Math.PI, true); //円の塗りつぶし sqr.fill();
パターン(CanvasPattern)
img要素、video要素、またcanvasを利用して線や塗りつぶしのパターンを作成できます。
パターンを作成するには『createPattern()』メソッドを利用します。
//パターン生成 createPattern(image, repeat)
引数imageには、img要素、video要素、canvasそ指定できます。引数repeatは画像の繰り返し方法の『repeat』、『repaer-x』、『repeat-y』、『no-repaet』の指定を文字列でできます。video要素を指定した場合は、『createPattern()』を呼び出した時点の再生フレームの画像が描画されます。
・img要素を指定した例
//img要素を生成
var image = new Image();
//imageの読み込み
image.onload = function() {
//img要素の繰り返しパターン生成
var pattern = sqr.createPattern(image, "repeat");
//塗りつぶしパターンに指定
sqr.fillStyle = pattern;
//canvasの描画
sqr.fillRect(0, 0, 100, 100);
};
//img要素読み込み
image.src = "butterfly.png"
また、線や塗りつぶしを半透明で描画することができます。
//半透明にする sqr.globalAlpha = 0.5;
『0.0（完全な透明）』から『1.0（透明ではない）』で値を指定します。
//img要素を生成
var image = new Image();
//imageの読み込み
image.onload = function() {
//img要素の繰り返しパターン生成
var pattern = sqr.createPattern(image, "repeat");
//塗りつぶしパターンに指定
sqr.fillStyle = pattern;
//canvasの描画
sqr.fillRect(0, 0, 300, 300);
};
//img要素読み込み
image.src = "butterfly.png"
線のスタイル
stroke()やstrokeRect()で描画される線もスタイルの指定が出来ます。
線の太さ
線の太さを指定するには『lineWidth』プロパティに正数値を指定します。単位は『px』です。
context.lineWidth = value;
・線の太さが10px
//パスをリセット sqr.beginPath(); //線の太さの指定 sqr.lineWidth = 10; //四角形の描画 sqr.strokeRect(25, 25, 100, 200); //canvasをクリア sqr.clearRect(0, 0, canvas.width, canvas.height);
線の終点のスタイル
線の終点のスタイルを指定するには『lineCap』プロパティを指定します。方法は以下の3つがあります。
・round （丸みの終点）
・square （四角形の終点）
・round（丸みの終点）
sqr.beginPath(); //線の太さの指定 sqr.lineWidth = 20; //線の終点の指定 sqr.lineCap = "round"; sqr.moveTo(25, 25); sqr.lineTo(100, 25); sqr.stroke();
線の交差する角のスタイル
canvasで描画された2つの直線が交差する角のスタイルを『lineJoin』プロパティで指定できます。方法は以下の3つがあります。
・bevel （スタイルなし デフォルトの状態） ・round （角を丸くする） ・miter （角を尖らせる）
『miter』はさらに『miterLimit』というプロパティがあり、交差されているところに塗りつぶされた三角形が描画されます。三角形の高さは交差する線が鋭角であるほど高くなりますが、高すぎると角を尖らせる効果が無効化されてしまいますので注意が必要です。
context.miterLimit = value;
『miterLimit』の三角形の限界計算式は以下の通りです。
lineWidth / 2 * miterLimit
・bevelの指定
sqr.beginPath(); //線の太さの指定 sqr.lineWidth = 20; //線の交差したスタイルの指定 sqr.lineJoin = "bevel"; sqr.moveTo(25, 25); sqr.lineTo(100, 25); sqr.lineTo(90, 100); sqr.stroke();
影をつける
canvasで描画された図形や線に影をつけることができます。影をつけるには以下の4つのプロパティを使用します。
//影色の指定 shadowColor = "value"; //影を表示する座標xの位置 shadowOffsetX = value; //影を表示する座標yの位置 shadowOffsetY = value; //影のぼかし幅 shadowBlur = value;
・影の指定方法
sqr.shadowColor = "gray"; sqr.shadowOffsetX = 8; sqr.shadowOffsetY = 8; sqr.shadowBlur = 5;
テキストの描画
canvasにテキスト（文字列）を描画するには以下のプロパティ、メソッドを利用します。
//テキストの塗りつぶし fillterText(text, x, y, maxWidth) //テキストの外枠の描画 strokeText(text, x, y, maxWidth)
『fillText()』は『fillStyle』でスタイルを指定できます。『strokeText()』は『strokeStyle』でスタイルの指定ができます。
『fillText()』のみで通常は描画しますが、『strokeText()』と組み合わせることで枠付きの飾り文字などの表現が可能になります。
//font-family、font-sizeの指定 font //文字列の横方向の描画位置 textAline //テキストのベースラインの位置 textBaseline
『font』はCSSプロパティと同様に指定できます。『textAline』は『strokeText()』、『fillText()』で指定した座標に対して『left』、『right』、『center』、『start』、『end』、で指定出来ます。『start』、『end』は文字列の表示方向の影響を受けます。
『textBaseline』は『textAline』同様に『strokeText()』、『fillText()』で指定した座標に対し、『top』、『hanging』、『middle』、『alphabetic』、『ideogrphic』、『bottom』で指定できます。
var mssetext = "デザイナーへの道"; var textHeight = 24; mess.font = textHeight + 'px "ヒラギノ角ゴ Pro"'; var textWidth = mess.measureText(mssetext).width; mess.fillStyle = "black"; mess.textBaseline = "top"; mess.fillText(mssetext, 0, textHeight);
デモをご覧になって頂くとお解りになって頂けると思いますが、『textBaseline
はブラウザによって若干見え方が異なります。
各デモの動作環境は、Firefox3.6.3、Safari4とGoogleChrome4です。
ダウンロードはユーザー様の責任で行ってください。
なにか問題が発生した場合でも、当サイトでは責任を負いかねますので、
予めご了承ください。
上記をご承知の方のみ、以下よりダウンロードしてください。
なにか間違いがございましたら、ご指摘頂ければ幸いです。
宜しくお願い致します。
次回はグラフィックスの変形などをご紹介します。
また、今回はこちらを参考にさせて頂きました。
HTML5＆API入門
HTML5.JP
Jquery勉強し始めました。
PHPから逃げているだけなんですけど。