HTML canvas addColorStop() メソッド

❮ HTML Canvas リファレンス

例

矩形の塗りつぶしスタイルとして、黒から白になるグラデーションを定義します：
（訳注：図形が表示されない場合は、ブラウザの更新ボタンを押してください。）

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Try it Yourself »

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

Method
addColorStop() Yes 9.0 Yes Yes Yes

定義と用法

addColorStop() メソッドは、グラデーションオブジェクトの色と位置を指定します。

addColorStop() メソッドは createLinearGradient() か createRadialGradient() と一緒に使用します。

注： グラデーションを変更するために、addColorStop() メソッドを複数回呼び出すことができます。 グラデーション・オブジェクトのこのメソッドを省略した場合、グラデーションは表示されません。 グラデーションを表示するためには、少なくとも 1 つのカラー・ストップを作成する必要があります。

JavaScript 構文： gradient.addColorStop(stop,color);

パラメータの値

パラメータ 説明 Play it
stop グラデーションの開始と終了の位置を表す、0.0 ～ 1.0 の間の値 Play it »
color stop の位置に表示する CSS カラー値 Play it »
Examples

その他の例

例

複数の addColorStop() メソッドを持つグラデーションを定義します：

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Try it Yourself »
HTML canvas Reference HTML Canvas リファレンス