HTML-doek createRadialGradient() Metode

❮ HTML-doekverwysing

Voorbeeld

Teken 'n reghoek en vul met 'n radiale/sirkelvormige gradiënt:

Jou blaaier ondersteun nie die HTML5-skerm nie.

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);

Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.

Method
createRadialGradient() Yes 9.0 Yes Yes Yes

Definisie en gebruik

Die createRadialGradient() metode skep 'n radiale/sirkulêre gradiëntvoorwerp.

Die gradiënt kan gebruik word om reghoeke, sirkels, lyne, teks, ens.

Wenk: Gebruik hierdie voorwerp as die waarde vir die strokeStyle- of fillStyle- eienskappe.

Wenk: Gebruik die addColorStop() metode om verskillende kleure te spesifiseer, en waar om die kleure in die gradiëntvoorwerp te plaas.

JavaScript-sintaksis: konteks .createRadialGradient( x0,y0,r0,x1,y1,r1 );

Parameterwaardes

Parameter Description
x0 The x-coordinate of the starting circle of the gradient
y0 The y-coordinate of the starting circle of the gradient
r0 The radius of the starting circle
x1 The x-coordinate of the ending circle of the gradient
y1 The y-coordinate of the ending circle of the gradient
r1 The radius of the ending circle

❮ HTML-doekverwysing