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