createRadialGradient lienzo HTML método ()
Ejemplos
Dibujar un rectángulo con un relleno degradado radial / circular:
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);
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);
Trate »
Soporte para el navegador
Internet Explorer 9, el método de Firefox, Opera, Chrome y Safari createRadialGradient apoyo ().
Nota: 8 y versiones anteriores de Internet Explorer no son compatibles con el elemento <canvas>.
Definición y Uso
createRadialGradient método () crea un objeto degradado radial / circular.
Gradiente puede utilizarse para rellenar rectángulos, círculos, líneas, texto, y así sucesivamente.
Consejo: Utilice este objeto como strokeStyle o fillStyle valor de la propiedad.
Consejo: Utilice addColorStop () método especifica un color diferente, así como dónde ubicar el objeto degradado de color.
| la sintaxis de JavaScript: | contexto .createRadialGradient (X0, Y0, r0, x1, y1, r1); |
|---|
parámetro Valor
| 参数 | 描述 |
|---|---|
| x0 | 渐变的开始圆的 x 坐标 |
| y0 | 渐变的开始圆的 y 坐标 |
| r0 | 开始圆的半径 |
| x1 | 渐变的结束圆的 x 坐标 |
| y1 | 渐变的结束圆的 y 坐标 |
| r1 | 结束圆的半径 |