canvas
canvas要素 4.グラデーション
canvas要素はscriptによって画像が扱える要素です。
グラデーション
HTMLは1.直線を引くと同じものを使用します。
window.onload=canvas_line;
function canvas_line() {
/* <canvas>要素のノードオブジェクトの取得 */
var canvas=document.getElementById('newcanvas');
/* 未対応の場合処理終了 */
if(!canvas.getContext){
return false;
}
/* 描画用のオブジェクトを取得する */
var cs = canvas.getContext('2d');
/* 矩形にグラデーションを設定 */
cs.beginPath(); // パスのリセット
// 線形のグラデーションのオブジェクトを作成
var gr = cs.createLinearGradient(0,0,0,80);
// 赤 グラデーションの分岐点と色を指定
gr.addColorStop(0,'#ff0000');
// 緑 グラデーションの分岐点と色を指定
gr.addColorStop(0.5,'#00ff00');
// 青 グラデーションの分岐点と色を指定
gr.addColorStop(1,'#0000ff');
cs.fillStyle = gr;
/* 矩形を描画 */
cs.rect(0,0,80,80);
cs.fill();
/* 矩形を描画 */
cs.beginPath(); // パスのリセット
var gr = cs.createLinearGradient(90,0,170,0);
gr.addColorStop(0,'#ff0000');
gr.addColorStop(0.5,'#00ff00');
gr.addColorStop(1,'#0000ff');
cs.fillStyle = gr;
cs.rect(90,0,80,80);
cs.fill();
/* 矩形を描画 */
cs.beginPath(); // パスのリセット
var gr = cs.createLinearGradient(0,90,90,170);
gr.addColorStop(0,'#ff0000');
gr.addColorStop(0.5,'#00ff00');
gr.addColorStop(1,'#0000ff');
cs.fillStyle = gr;
cs.rect(0,90,80,80);
cs.fill();
/* 矩形を描画 */
cs.beginPath(); // パスのリセット
var gr = cs.createRadialGradient(130,130,10,130,130,40);
gr.addColorStop(0,'#ff0000');
gr.addColorStop(0.5,'#00ff00');
gr.addColorStop(1,'#0000ff');
cs.fillStyle = gr;
cs.rect(90,90,80,80);
cs.fill();
/* 円を描画 */
cs.beginPath(); // パスのリセット
var gr = cs.createRadialGradient(40,220,10,40,220,40);
gr.addColorStop(0,'#ff0000');
gr.addColorStop(0.5,'#00ff00');
gr.addColorStop(1,'#0000ff');
cs.fillStyle = gr;
cs.arc(40,220,40,0,Math.PI*2,false);
cs.fill();
/* 扇形を描画 */
cs.beginPath(); // パスのリセット
var gr = cs.createRadialGradient(130,220,10,130,220,40);
gr.addColorStop(0,'#ff0000');
gr.addColorStop(0.5,'#00ff00');
gr.addColorStop(1,'#0000ff');
cs.fillStyle = gr;
cs.moveTo(130,220);
cs.arc(130,220,40,Math.PI/180*225,Math.PI/180*315,false);
cs.fill();
/* 直線を描画 */
cs.beginPath(); // パスのリセット
var gr = cs.createLinearGradient(10,280,200,280);
gr.addColorStop(0,'#ff0000');
gr.addColorStop(0.5,'#00ff00');
gr.addColorStop(1,'#0000ff');
cs.strokeStyle = gr;
cs.lineWidth = 20;
cs.moveTo(10,280);
cs.lineTo(200,280);
cs.stroke();
}
createLinearGradient(x0, y0, x1, y1)は線形のグラデーションです。(x0, y0)はグラデーションのスタートポイント(x1, y1)はグラデーションの終了ポイントですW3C参照。canvas要素の左上から計算します。図の左上からではありません。- グラデーションの開始位置(x0, y0)と終了位置(x1, y1)のy0とy1が同じなら水平方向、x0とx1が同じなら垂直方向のグラデーションとなります。
createLinearGradient(x0, y0, x1, y1)はオブジェクトを返します。addColorStop(offset, color)はグラデーションの色と色の分岐点です。offsetは0.0から1.0までの数値でグラデーションの開始ポイントから終了ポイントに当たります。W3C参照createLinearGradient(x0, y0, x1, y1)にaddColorStop(offset, color)でグラデーションの設定をしたものを塗りつぶしとしてstrokeStyleに代入します。createRadialGradient(x0, y0, r0, x1, y1, r1)は円形グラデーションですx0,y0,r0は開始円のx座標y座標半径でx1,y1,r1は終了円のx座標y座標半径となります。W3C参照- 線に対してもグラデーションの設定が可能です。
コメントが日本語で入っていますのでjavaScriptファイルの文字コードはHTMLファイルと同じものにしておいてください。