読者です 読者をやめる 読者になる 読者になる

カメニッキ

カメとインコと釣りの人です

canvasの使い方2/2(グラデーションから)

old

機能の続きです。

  • 四角のグラデーションをつけます
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);
}