onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
/* グラデーション領域をセット */
var grad = ctx.createLinearGradient(0,0, 0,140);
/* グラデーション終点のオフセットと色をセット */
grad.addColorStop(0,'rgb(192, 80, 77)'); // 赤
grad.addColorStop(0.5,'rgb(155, 187, 89)'); // 緑
grad.addColorStop(1,'rgb(128, 100, 162)'); // 紫
/* グラデーションをfillStyleプロパティにセット */
ctx.fillStyle = grad;
/* 矩形を描画 */
ctx.rect(0,0, 140,140);
ctx.fill();
}
『線形グラデーションを指定する』に戻る