English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
createRadialGradient() es un método de Canvas 2D API determina las coordenadas de dos círculos según los parámetros, dibuja el gradiente radiactivo. Este método devuelve CanvasGradient.
Manual de referencia de canvas HTML
Dibuja un rectángulo y usa un gradiente/Relleno de gradiente circular:
<!DOCTYPE html> <html> <head> <title>Uso del método createRadialGradient() en HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</title> </head> <body> <canvas id="myCanvas" width="300" altura="150" estilo="borde:1px sólido #d3d3d3> Su navegador no admite HTML5 etiqueta 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>Prueba y mira ‹/›
IEFirefoxOperaChromeSafari
Internet Explorer 9Firefox, Opera, Chrome y Safari admiten createRadialGradient() método.
Nota:Internet Explorer 8 y las versiones anteriores no admiten el elemento <canvas>.
El método createRadialGradient() crea una gradiente/objeto de gradiente circular.
La gradiente se puede usar para rellenar rectángulos, círculos, líneas, texto, etc.
Consejo:Utilice este objeto comostrokeStyle o fillStyle el valor de la propiedad.
Consejo:Utilice addColorStop() El método especifica diferentes colores y en qué lugar del objeto gradient se colocan los colores.
Sintaxis de JavaScript: | context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
---|
Parámetros | Descripción |
---|---|
x0 | Coordenada x del círculo inicial de la gradiente |
y0 | Coordenada y del círculo inicial de la gradiente |
r0 | Radio del círculo inicial |
x1 | Coordenada x del círculo final de la gradiente |
y1 | Coordenada y del círculo final de la gradiente |
r1 | Radio del círculo final |