イナヅマTVログ

Canvas始めました – 塗りを線形や円形のグラデーションで

| 0件のコメント

グラデーションで塗るの巻。

線形グラデーション
createLinearGradient(x, y, width, height)
グラデーション範囲を指定
x:int, y:int, width:int, height:int

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var gradient = context.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,'rgb(255,0,0)')
gradient.addColorStop(0.5,'rgb(0,255,0)')
gradient.addColorStop(1,'rgb(0,0,255)')
context.fillStyle = gradient;
context.fillRect(0,0,100,100);
 
var gradient2 = context.createLinearGradient(0,0,0,100);
gradient2.addColorStop(0,'rgb(255,0,0)')
gradient2.addColorStop(0.5,'rgb(0,255,0)')
gradient2.addColorStop(1,'rgb(0,0,255)')
context.fillStyle = gradient2;
context.fillRect(120,0,100,100);

createLinearGradient
context.createLinearGradientで作ったインスタンスをfillStyleにセットする。

円形グラデーション
createRadialGradient(x1, y1, r1, x2, y2, r2)
グラデーション範囲を指定
開始円
x1:int, y1:int, r1:int
終了円
x2:int, y2:int, r2:int

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var gradient = context.createRadialGradient(60,60,10, 60,60,60);
gradient.addColorStop(0,'rgb(255,0,0)')
gradient.addColorStop(0.5,'rgb(0,255,0)')
gradient.addColorStop(1,'rgb(0,0,255)')
context.fillStyle = gradient;
context.fillRect(0,0,120,120);
 
var gradient2 = context.createRadialGradient(200,60,10, 200,60,90);
gradient2.addColorStop(0,'rgb(255,0,0)')
gradient2.addColorStop(0.5,'rgb(0,255,0)')
gradient2.addColorStop(1,'rgb(0,0,255)')
context.fillStyle = gradient2;
context.fillRect(140,0,120,120);

createRadialGradient
context.createRadialGradientで作ったインスタンスをfillStyleにセットする。

コメントを残す