Metoda CreateRadialGradient() na plátně HTML

❮ HTML Canvas Reference

Příklad

Nakreslete obdélník a vyplňte jej radiálním/kruhovým přechodem:

Váš prohlížeč nepodporuje HTML5canvatag.

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

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která tuto metodu plně podporuje.

Method
createRadialGradient() Yes 9.0 Yes Yes Yes

Definice a použití

Metoda createRadialGradient() vytvoří objekt s radiálním/kruhovým přechodem.

Přechod lze použít k vyplnění obdélníků, kruhů, čar, textu atd.

Tip: Tento objekt použijte jako hodnotu pro vlastnosti strokeStyle nebo fillStyle .

Tip: Použijte metodu addColorStop() k určení různých barev a umístění barev v objektu přechodu.

Syntaxe JavaScriptu: kontext .createRadialGradient( x0,y0,r0,x1,y1,r1 );

Hodnoty parametrů

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 Canvas Reference