Canvasの線形グラデーション
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); /* グラデーション領域をセット */ var grad = ctx.createLinearGradient(0,0,400,400); /* グラデーション終点のオフセットと色をセット */ grad.addColorStop(0.1,'rgb(192, 80, 77)'); // 赤 grad.addColorStop(0.9,'rgb(128, 100, 162)'); // 紫 /* グラデーションをfillStyleプロパティにセット */ ctx.fillStyle = grad; //円を指定。 ctx.arc(200,200,150,0/180*Math.PI,360/180*Math.PI,true); //四角形を描く ctx.fill();