HTML5 チュートリアル

HTML5 ホーム
HTML5 概要
HTML5 新しい要素
HTML5 ビデオ
HTML5 ビデオ/DOM
HTML5 オーディオ
HTML5 キャンバス
HTML5 Geolocation
HTML5 Web ストレージ

HTML5 フォーム

HTML5 Input タイプ
HTML5 フォーム要素
HTML5 フォーム属性

HTML5 リファレンス

HTML5 タグ
HTML5 属性
HTML5 イベント
HTML5 キャンバス 2d
HTML 妥当な DTD

HTML5 canvas addColorStop メソッド

HTML5 track Tag Reference HTML5 canvas リファレンス

例

赤と緑のグラデーション塗りつぶし矩形を描画します:

JavaScript:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var grd=ctx.createLinearGradient(0,0,150,0);
grd.addColorStop(0.3,"red");
grd.addColorStop(0.7,"green");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,100);

Try it yourself »

定義と用法

addColorStop メソッドは、グラデーションオブジェクトの色と、どこにその色を配置するかを指定します。

addColorStop メソッドは、createLinearGradient または createRadialrGradient メソッドと共に使用します。

JavaScript 構文:	gradient.addColorStop(0.5,"#FF0000");

ブラウザ・サポート

addColorStop メソッドは、主要な全ブラウザがサポートしています。

パラメータ値

パラメータ	値	説明	Play it
position	number	0.0 はグラデーションの始点で、1.0 は終点である、0.0 と 1.0 の間の値	Play it »
color	color	CSS の色値は、指定した位置で色がストップすることを表す	Play it »

HTML5 track Tag Reference HTML5 canvas リファレンス