HTML canvas createRadialGradient() 方法

HTML5 Canvas Referans Kılavuzu

定义和用法

createLinearGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

实例

绘制一个矩形，并用放射状/圆形渐变进行填充：

Your browser does not support the HTML5 canvas tag.

JavaScript:

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");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

Kişisel olarak deneyin

Sözdizimi

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Parametre değeri

Parametre Açıklama
x0 Gradyanın başlangıç noktası x koordinatı
y0 Gradyanın başlangıç noktası y koordinatı
r0 Başlangıç noktası yarıçapı
x1 Gradyanın bitiş noktası x koordinatı
y1 Gradyanın bitiş noktası y koordinatı
r1 Dairenin bitiş noktası yarıçapı

Tarayıcı Desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.

HTML5 Canvas Referans Kılavuzu