HTML リファレンスマニュアル

HTML タグ完全ガイド

HTML canvas createRadialGradient() メソッド

createRadialGradient() は Canvas 2D API はパラメータに基づいて2つの円の座標を決定し、放射状のグラデーションを描画する方法です。このメソッドは CanvasGradient を返します。

オンラインのサンプル

矩形を描画して、放射状/円形のグラデーションで塗りつぶし：

サンプル

!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　createRadialGradient()メソッドの使用(基本トレーニングウェブサイト　oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザは HTML をサポートしていません。5　canvas　タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
</script>
</body>
</html>

テストをしてみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox、Opera、Chrome および Safari は createRadialGradient() をサポートしています。メソッド。

注意：Internet Explorer 8 及びその以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用法

createRadialGradient() メソッドは径向グラデーションを/円グラデーションオブジェクト。
グラデーションは矩形、円、線、テキストなどに塗りつぶすことができます。

ヒント：次を使用してくださいstrokeStyle または fillStyle 属性の値。

ヒント：次を使用してください addColorStop() メソッドは異なる色を定義し、グラデーションオブジェクト内で色をどのように配置するかを指定します。

JavaScript 文法：	context.createRadialGradient(x0,y0,r0,x1,y1,r1);

パラメータの値

パラメータ	説明
x0	グラデーションの開始円の x 座標
y0	グラデーションの開始円の y 座標
r0	円の開始半径
x1	グラデーションの終了円の x 座標
y1	グラデーションの終了円の y 座標
r1	円の終了半径

HTML canvas 参考マニュアル

HTML: <template> タグ