CanvasGradient インターフェイスは、グラデーションを記述する不透明オブジェクトを表します。 CanvasRenderingContext2D.createLinearGradient() または CanvasRenderingContext2D.createRadialGradient() メソッドから返されます。

fillStyle または strokeStyle として使用することができます。

プロパティ

不透明オブジェクトとして、公開されているプロパティはありません。

メソッド

継承されたメソッドはありません。

CanvasGradient.addColorStop()
offset および color で定義される、グラデーションの新しい停止点を追加します。オフセットが 01 の間でなければ INDEX_SIZE_ERR が発生し、色が CSS の <color> として解釈できない場合は SYNTAX_ERR が発生します。

仕様書

仕様書 状態 備考
HTML Living Standard
CanvasGradient の定義
現行の標準  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 3.6
補足
完全対応 3.6
補足
補足 Before Firefox 5.0, specifying non-finite values when adding color stops through a call to addColorStop() incorrectly throws SYNTAX_ERR instead of INDEX_SIZE_ERR.
IE 完全対応 9Opera 完全対応 9Safari 完全対応 3.1WebView Android ? Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10.0Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
addColorStopChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android ? Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank
最終更新者: mfuji09,