CanvasRenderingContext2D.createLinearGradient() - 線型グラデーションのオブジェクトを作成

投稿日:2016/03/03 / 更新日:2016/03/03

JavaScriptの、CanvasRenderingContext2DオブジェクトのcreateLinearGradient()は、キャンパスに線形的なグラデーションを描画するためのCanvasGradientオブジェクトを取得するプロパティです。引数には、開始点のX座標、Y座標と終了点のX座標、Y座標を示す4つの数値を指定します。

開始点と終了点によってグラデーションの範囲を決めるとともに「方角を決める」という点を意識すると分かりやすいと思います。このオブジェクトに別途、addColorStop()で色を加えることで線形グラデーションの材料が完成します。その材料は、値として、fill()などに指定できます。

サンプルコード

<canvas id="target"></canvas>

// キャンパス要素を取得
var canvas = document.getElementById( "target" ) ;

// 二次元グラフィックスのコンテキスト(CanvasRenderingContext2D)を取得
var context = canvas.getContext( "2d" ) ;

// 線形グラデーションのCanvasGradientオブジェクトを取得 ( 例1 )
// 左上(0,0)から右下(100,100)に進むグラデーションになる
var gradient = context.createLinearGradient( 0,0, 100,100 ) ;

// X0、Y0からX100、Y0までの場合 ( 例2 )
// 左(0,0)から右(100,0)に向かって進むグラデーションになる
var gradient = context.createLinearGradient( 0,0, 100,0 ) ;

// X100、Y0からX100、Y100までの場合 ( 例3 )
// 右上(100,0)から右下(100,100)に向かって進むグラデーションになる
var gradient = context.createLinearGradient( 100,0, 100,100 ) ;

デモ

100x100のキャンパスを2つ用意しました。左側は塗りつぶし、右側はストローク(ライン)です。ボタンを押すと、createLinearGradient()を使って、CanvasGradientオブジェクトを取得します。この記事で紹介するメソッドは、取得するまでが役割になりますがそれだけだと何が起こっているか分からないので、おまけとして、「描画」を押すとCanvasGradientオブジェクトを元にしてグラデーションで塗りつぶします。描画はあくまでも別の処理です。ここでは開始点と終了点が違うことで、グラーデーションがどのように変わるのか、だけを意識して下さい。

RUN
HTML
CSS
JavaScript

#parent { border: 1px solid #333 ; padding: 18px 0 ; overflow: hidden ; } #parent div { width: 50% ; float: left ; } .target { width: 100px ; height: 100px ; background: #f2f2f2 ; display: block ; margin: 0 auto ; border: 0 ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; } code { background: #f2f2f2 ; }

// キャンパス要素を取得 var canvas1 = document.getElementById( "target1" ) ; var canvas2 = document.getElementById( "target2" ) ; // 二次元グラフィックスのコンテキストを取得 var context1 = canvas1.getContext( "2d" ) ; var context2 = canvas2.getContext( "2d" ) ; // クリックイベント1 document.getElementById( "method1" ).addEventListener( "click", function() { // 線形グラデーションのCanvasGradientオブジェクトを取得 ( 例1 ) // 左上(0,0)から右下(100,100)に進むグラデーションになる var gradient1 = context1.createLinearGradient( 0,0, 100,100 ) ; var gradient2 = context2.createLinearGradient( 0,0, 100,100 ) ; // 描画 drawReady( canvas1, context1, gradient1, "fill" ) ; drawReady( canvas2, context2, gradient2, "stroke", 0,0, 100,100 ) ; } ) ; // クリックイベント2 document.getElementById( "method2" ).addEventListener( "click", function() { // X0、Y0からX100、Y0までの場合 ( 例2 ) // 左(0,0)から右(100,0)に向かって進むグラデーションになる var gradient1 = context1.createLinearGradient( 0,0, 100,0 ) ; var gradient2 = context2.createLinearGradient( 0,0, 100,0 ) ; // 描画 drawReady( canvas1, context1, gradient1, "fill" ) ; drawReady( canvas2, context2, gradient2, "stroke", 0,0, 100,0 ) ; } ) ; // クリックイベント3 document.getElementById( "method3" ).addEventListener( "click", function() { // X100、Y0からX100、Y100までの場合 ( 例3 ) // 右上(100,0)から右下(100,100)に向かって進むグラデーションになる var gradient1 = context1.createLinearGradient( 100,0, 100,100 ) ; var gradient2 = context2.createLinearGradient( 100,0, 100,100 ) ; // 描画 drawReady( canvas1, context1, gradient1, "fill" ) ; drawReady( canvas2, context2, gradient2, "stroke", 100,0, 100,100 ) ; } ) ; // クリックイベント4 document.getElementById( "method4" ).addEventListener( "click", function() { // X0、Y0からX50、Y50までの場合 ( 例4 ) // 左上(0,0)から右下(50,50)に向かって進むグラデーションになる var gradient1 = context1.createLinearGradient( 0,0, 50,50 ) ; var gradient2 = context2.createLinearGradient( 0,0, 50,50 ) ; // 描画 drawReady( canvas1, context1, gradient1, "fill" ) ; drawReady( canvas2, context2, gradient2, "stroke", 0,0, 100,100 ) ; } ) ; // クリックイベント5 document.getElementById( "method5" ).addEventListener( "click", function() { // キャンパス右に描画 context1.fill() ; // キャンパス左に描画 context2.stroke() ; } ) ; // リセット document.getElementById( "method6" ).addEventListener( "click", function() { // キャンパスをクリアーする context1.clearRect( 0, 0, 100, 100 ) ; context2.clearRect( 0, 0, 100, 100 ) ; // グラデーションをクリアーする context1.fillStyle = "transparent" ; context2.fillStyle = "transparent" ; context1.strokeStyle = "transparent" ; context2.strokeStyle = "transparent" ; } ) ; // グラデーションの描画 function drawReady( canvas, context, gradient, type, x1, y1, x2, y2 ) { // 色を追加する gradient.addColorStop( 0.2, "orange" ) ; gradient.addColorStop( 0.4, "pink" ) ; gradient.addColorStop( 0.6, "red" ) ; gradient.addColorStop( 0.8, "#2660a1" ) ; gradient.addColorStop( 1.0, "#d36015" ) ; // キャンパスサイズを指定 (サイズを更新すると描画内容はリセットされる) canvas.width = 100 ; canvas.height = 100 ; switch( type ) { // 塗りつぶしの場合 case "fill" : // 描画の範囲を決める context.rect( 0,0, 100,100 ) ; // 塗りつぶしの色を決める (グラデーションを指定) context.fillStyle = gradient ; break ; // ストロークの場合 case "stroke" : // ストロークの開始点に移動 context.moveTo( x1, y1 ) ; // ストロークの終了点までパスを結ぶ context.lineTo( x2, y2 ) ; // ストロークの幅を決める context.lineWidth = 10 ; // ストロークの色を決める (グラデーションを指定) context.strokeStyle = gradient ; break ; } }

構文

CanvasGradient = CanvasRenderingContext2D.createLinearGradient( x1, y1, x2, y2 ) ;

引数

項目	説明
x1	開始点のX座標。
y1	開始点のY座標。
x2	終了点のX座標。
y2	終了点のY座標。

戻り値

項目	説明
CanvasGradient	CanvasGradientオブジェクトが戻り値となる。

ノート

サポート状況: 主要な全てのブラウザがサポートしている。Ie8以下はcanvas自体に対応していない。
方角を決めるもの: 開始点と終了点は範囲を決めるというのもあるが、それよりも「方角を決める」という点を強く意識すると分かりやすかった。
色はメソッドで追加: createLinearGradient()で作成したCanvasGradientオブジェクトに、色の情報を設定するにはaddColorStop()メソッドを利用する。