CanvasGradient.addColorStop() - 線形グラデーションの色を指定する

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

JavaScriptの、CanvasGradientオブジェクトのaddColorStop()は、グラデーションの色を調整するメソッドです。グラデーションは0が全体の開始点、1が全体の終了点という計算になっています。第1引数には開始点からの距離を0〜1で指定します。第2引数には、第1引数で決めた位置の色を指定します。色はCSSで許可された値ならなんでも大丈夫です。このメソッドは重ねて複数回、使用する仕様になっています。複数の位置に違う色を指定した場合、色と色の間が滑らかに補完されることで、グラデーション効果を生みます。

「位置に色を置く」ということを意識しましょう。複数の位置に違う色を置くことで、その色と色の間が補完される。逆に言うと、全く同じ位置に違う色を設置した場合、色と色に隙間が存在しないため補完されません。ということは、その場合、その位置で2つの色がくっきりと分かれることになります。

サンプルコード

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

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

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

// 線形グラデーションのCanvasGradientオブジェクトを取得
var gradient = context.createLinearGradient( 0,0, 100,100 ) ;

// addColorStop()を使ってグラデーションの色を調整
gradient.addColorStop( 0.2, "red" ) ;	// 開始地点から0.2の割合の位置に赤
gradient.addColorStop( 0.4, "blue" ) ;	// 開始地点から0.4の割合の位置に青
gradient.addColorStop( 0.7, "green" ) ;	// 開始地点から0.7の割合の位置に赤
gradient.addColorStop( 0.8, "#2660A1" ) ;	// 開始地点から0.8の割合の位置に#2660A1
gradient.addColorStop( 1.0, "#d36015" ) ;	// 開始地点から1.0の割合の位置に#d36015

デモ

200x200サイズのキャンパスです。ボタンを押すと、開始点(0,0)と終了点(200,0)を設定してあるCanvasGradientオブジェクトに、ボタンのラベル通りの色を設定します。設定するまでがaddColorStop()の働きです。それだけだと何が起こったかが分からないので、おまけとして、「描画」のボタンを押すと、このオブジェクトを使って要素を塗りつぶします。色を設定するまでがaddColorStop()の働きだということを理解して下さい。

RUN
HTML
CSS
JavaScript

#parent { border: 1px solid #333 ; padding: 18px 0 ; } #target { width: 200px ; height: 200px ; background: #f2f2f2 ; margin: 0 auto ; display: block ; } 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 canvas = document.getElementById( "target" ) ; // キャンパスのサイズ canvas.width = 200 ; canvas.height = 200 ; // 二次元グラフィックスのコンテキスト(CanvasRenderingContext2D)を取得 var context = canvas.getContext( "2d" ) ; // クリックイベント1 document.getElementById( "method1" ).addEventListener( "click", function() { // 線形グラデーションのCanvasGradientオブジェクトを取得 var gradient = context.createLinearGradient( 0,0, 200,0 ) ; // addColorStop()を使ってグラデーションの色を調整 gradient.addColorStop( 0, "red" ) ; gradient.addColorStop( 1, "blue" ) ; // 描画の準備 drawReady( gradient ) ; } ) ; // クリックイベント2 document.getElementById( "method2" ).addEventListener( "click", function() { // 線形グラデーションのCanvasGradientオブジェクトを取得 var gradient = context.createLinearGradient( 0,0, 200,0 ) ; // addColorStop()を使ってグラデーションの色を調整 gradient.addColorStop( 0.5, "red" ) ; gradient.addColorStop( 0.5, "blue" ) ; // 描画の準備 drawReady( gradient ) ; } ) ; // クリックイベント3 document.getElementById( "method3" ).addEventListener( "click", function() { // 線形グラデーションのCanvasGradientオブジェクトを取得 var gradient = context.createLinearGradient( 0,0, 200,0 ) ; // addColorStop()を使ってグラデーションの色を調整 gradient.addColorStop( 0.2, "red" ) ; gradient.addColorStop( 0.5, "green" ) ; gradient.addColorStop( 1.0, "blue" ) ; // 描画の準備 drawReady( gradient ) ; } ) ; // クリックイベント4 document.getElementById( "method4" ).addEventListener( "click", function() { // 線形グラデーションのCanvasGradientオブジェクトを取得 var gradient = context.createLinearGradient( 0,0, 200,0 ) ; // addColorStop()を使ってグラデーションの色を調整 gradient.addColorStop( 0.5, "rgba(255,0,0, 0)" ) ; gradient.addColorStop( 1.0, "rgba(255,0,0, 1)" ) ; // 描画の準備 drawReady( gradient ) ; } ) ; // クリックイベント5 document.getElementById( "method5" ).addEventListener( "click", function() { // キャンパスに描画 context.fill() ; } ) ; // リセット document.getElementById( "method6" ).addEventListener( "click", function() { // キャンパスをクリアーする context.clearRect( 0, 0, 200, 200 ) ; } ) ; // グラデーションの描画 function drawReady( gradient ) { // キャンパスをクリアーする context.clearRect( 0, 0, 200, 200 ) ; // 描画の範囲を決める context.rect( 0,0, 200,200 ) ; // 塗りつぶしの色を決める (グラデーションを指定) context.fillStyle = gradient ; }

構文

void CanvasGradient.addColorStop( offset, color ) ;

引数

項目	説明
offset	`0`〜`1`の数値を指定する。この数値はグラデーション全体の`0`が開始点、`1`が終了点とした場合の、開始点からのオフセット(距離)を意味する。その位置に第2引数で指定した色を設置される。
color	CSSで許可されている方法で色を指定する。`#D36015`、`brown`、`rgb(211,96,21)`、`rgba(211,96,21,0.1)`、`hsl(24,82%,45%)`、`transparent`など。

戻り値

戻り値はありません。

ノート

サポート状況: 主要な全てのブラウザがサポートしている。Ie8以下はcanvas自体に対応していない。
グラデーション効果は色と色の間: 色と色の間が補完されることで、グラデーション効果が生まれる仕組み。つまり、補完されるべき隙間がない場合は、その位置で2つの色がくっきりと分かれることになる。
最初と最後は引き伸ばし: 開始点(0)、または終了点(1)の位置に色を指定しなかった場合、そこから一番近い位置に設置した色が引き伸ばされる。