グラデーションで塗るの巻。
線形グラデーション
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); |
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); |
context.createRadialGradientで作ったインスタンスをfillStyleにセットする。