| 目次 |
|---|
|
・色を指定する ・半透明度を指定する ・線のスタイルを指定する ・影を指定する |
<canvas>要素の線色のデフォルトは、黒となります。
また塗りつぶし色のデフォルトも、黒となります。
描画する前に次のプロパティに色情報を指定します。
colorに指定する色はCSSで指定するフォーマットに対応しています。
例えば
"orange"、"#ff0000"や"rgb(192, 80, 77)"などです。
リスト1. 色の指定
// 色名で指定。線色=赤 / 塗りつぶし=緑 context.strokeStyle = 'red'; context.fillStyle = 'green'; // 16進で指定。線色=緑 / 塗りつぶし=青 context.strokeStyle = '#00ff00'; context.fillStyle = '#0000ff'; // 10進で指定。線色=青 / 塗りつぶし=赤 context.strokeStyle = 'rgb(00,00,255)'; context.fillStyle = 'rgb(255,00,00)';
コーディング例
<canvas>要素の塗りつぶしは、半透明度を変更することが可能です。
デフォルトは、不透明(半透明度=1)です。
透明(半透明度=0)～不透明(半透明度=1)まで設定することが出来ます。
半透明度の設定方法は、CSS3の「rgba()」を用いる方法と「globalAlpha」属性の二つの方法があります。
リスト2. 「rgba()」にて、半透明度を指定
// rgbaで指定。線色=赤(0.3) / 塗りつぶし=緑(0.8) context.strokeStyle = 'rgba(255,00,00,0.3)'; context.fillStyle = 'rgba(00,255,00,0.8)'; // rgbaで指定。線色=緑(0.5) / 塗りつぶし=青(0.5) context.strokeStyle = 'rgba(00,255,00,0.5)'; context.fillStyle = 'rgba(00,00,255,0.5)'; // rgbaで指定。線色=青(0.8) / 塗りつぶし=赤(0.3) context.strokeStyle = 'rgba(00,00,255,0.8)'; context.fillStyle = 'rgba(255,00,00,0.3)';
コーディング例
リスト3. 「globalAlpha」属性にて、半透明度を指定
// 半透明度を0.5に設定 context.globalAlpha = 0.5; // ※細かな設定を行うには向いていません。
コーディング例
重ねた時の合成方法を指定することが出来ます。
但し、合成方法と結果は、ブラウザによって異なる場合(未サポートや解釈が異なる)があります。
<canvas>要素は、線の幅、端部及び接合部のスタイルを指定ができます。
※線種(点線など、実線以外)の指定は出来ません。
リスト4. 線の幅を指定
/* デフォルトの線幅 */ // デフォルトは、線幅=1になります。 /* 線幅 5 */ context.lineWidth = 5; //線幅を5に設定。 /* 線幅 20 */ context.lineWidth = 20; //線幅を20に設定。
コーディング例
リスト5. 端部を指定
/* butt */ context.lineCap = "butt"; //フラットな端部(デフォルト) /* round */ context.lineCap = "round"; //丸めた端部 /* square */ context.lineCap = "square"; //囲まれた端部
コーディング例
リスト6. 接合部を指定
/* miter */ context.lineJoin = "miter"; //面取りのない接合部(デフォルト) /* bevel */ context.lineJoin = "bevel"; //面取りした接合部 /* round */ context.lineJoin = "round"; //丸めた接合部
コーディング例
リスト7. 接合部の限界を指定
/* デフォルト */ /* miterLimit = 2; */ context.miterLimit = 2; //比率 = 2 を指定。 /* miterLimit = 5; */ context.miterLimit = 5; //比率 = 5 を指定。
コーディング例
<canvas>要素は、図形に影を指定ができます。
リスト8. 影を指定
/* 線に影 */ context.shadowColor = "gray"; //影の色は銀色 context.shadowOffsetX = 5; //水平 5 context.shadowOffsetY = 5; //垂直 5 context.shadowBlur = 0; //ぶれ 0 context.lineWidth = 20; //線幅を20に設定。 context.lineCap = "round"; //丸めた端部 context.beginPath(); //書き始めます。 context.moveTo(20, 20); //x=20、y=20の位置に移動。 context.lineTo(430, 20); //x=430、y=20の位置に線引き。 context.stroke(); //線を描く。 /* 四角に影 */ context.strokeStyle = 'green'; //色は緑 context.shadowColor = "blue"; //影の色は青 context.shadowOffsetX = 10; //水平 10 context.shadowOffsetY = 0; //垂直 0 context.shadowBlur = 5; //ぶれ 5 context.lineJoin = "round"; //丸めた接合部 context.strokeRect(50,50,100,100); //四角を描く。 /* 円に影 */ context.fillStyle = 'yellow'; //色は黄色 context.shadowColor = "red"; //影の色は赤 context.shadowOffsetX = 0; //水平 3 context.shadowOffsetY = 0; //垂直 3 context.shadowBlur = 20; //ぶれ 20 context.beginPath(); //書き始めます。 context.arc(300, 100, 50, 0, Math.PI*2, false); //円を描く context.fill(); //塗りつぶす。
コーディング例