canvasの使い方2/2(グラデーションから)
機能の続きです。
- 四角のグラデーションをつけます
function draw(){ var canvas = document.getElementById("draw"); var context = canvas.getContext("2D"); //グラデーション範囲を指定 x=0/y=0からx=0/y=300までを範囲に var gradient = context.createLinearGradient(0,0,0,300); //開始点0から0.5までを青、0.5から最後までを赤に gradient.addColorStop(0, 'blue'); gradient.addColorStop(0.5, 'red'); //塗りつぶしの色にgradientを入れる context.fillStyle = gradient; context.fillRect(0,0,300,300); }
- 丸のグラデーションをつけます
function draw(){ var canvas = document.getElementById("draw"); var context = canvas.getContext("2D"); //グラデーション範囲を指定 var gradient = context.createRadialGradient(0,150,50,0,150,150); gradient.addColorStop(0, 'blue'); gradient.addColorStop(0.5, 'yellow'); gradient.addColorStop(1, 'red'); context.fillStyle = gradient; context.fillRect(0,0,300,300); }