Color de relleno
Podemos rellenar las formas geometricas dibujadas en el <canvas> utilizando el método fill().
Para los rectángulos podemos utilizar el método fillRect() y para el texto: el método fillText().
Previamente tenemos que especificar el estilo de relleno fillStyle, ya sea color, gradiente o patrón.
Si no especificamos un estilo de relleno, este será por defecto negro.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| fillStyle | context.fillStyle=color|gradient|pattern; | Determina o devuelve el color, gradiente o patrón del relleno. | #000; |
| fillRect() | context.fillRect(x,y,anchura,altura); | Dibuja y rellena un rectángulo desde un punto (x,y). | #000; |
| fillText() | context.fillText(text,x,y,maxWidth); | Dibuja texto relleno con un color, gradiente o patrón previamente definido.maxWidth es opcional. No se admite en Safari. |
#000; |
| fill() | context.fill(); | Rellena una forma geométrica. | #000; |
Vea la chuleta con las propiedades y metodos() de canvas.
Veamos un ejemplo. A continuación queremos dibujar un triángulo. Utilizamos como siempre el método beginPath()
para empezar el trazado. Utilizamos el método moveTo() para mover el "lapiz" hasta el origen de nuestro trazado;
esbozamos dos de los tres lados utilizando el método lineTo(). No es necesario cerrar el trazado. Tampoco es necesario trazarlo.
Utilizamos fillStyle para definir el relleno ( amarillo en este caso ), y utlilizamos el método fill() para rellenar de color el triángulo.
Para rellenar de color un rectángulo es mucho más fácil. Sencillamente definimos el relleno con fillStyle y después utilizamos
el método fillRect(x,y,anchura,altura) para rellenar el rectángulo.
Para texto utilizamos el método fillText(text,x,y,maxWidth). !OJO¡ el parámetro opcional maxWidth no se admite en Safari.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
// dibujamos y rellenamos un trazado
ctx.fillStyle = "#ff0";
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(70, 100);
ctx.fill();
// dibujamos y rellenamos un rectángulo
ctx.fillStyle = "#b00";
ctx.fillRect(100,75,110,60);
// rellenamos texto
ctx.fillStyle = "#0b0";
ctx.font="25pt Georgia";
ctx.fillText("\241Hola Mundo!",20,120);
}
}