Texto con reflejo
Para crear texto con reflejo utilizaremos otros dos métodos de <canvas> translate() y scale(). También aplicaremos transparencia con globalAlpha.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| font | context.font = "italic small-caps bold 12px arial"; | Determina (sets) o devuelve (returns) las propiedades del texto ( font-style, font-variant, font-weight, font-size, font-family ) | 10px sans-serif |
| textAlign | context.textAlign = "center | end | left | right | start"; | Especifica el tipo de alineación del texto. | start |
| textBaseline | context.textBaseline = "alphabetic | top | hanging | middle | ideographic | bottom"; |
Determina (sets) o devuelve (returns) la alineación vertical del texto. | alphabetic |
| fillText() | context.fillText(text,x,y,maxWidth); | Dibuja texto relleno con un color, gradiente o patrón previamente definido.maxWidth es opcional. |
black |
| strokeText() | context.strokeText(text,x,y,maxWidth); | Dibuja texto bordeado con un color, gradiente o patrón previamente definido.maxWidth es opcional. |
black |
| measureText() | context.measureText(text).width; | Devuelve un objeto que contiene la anchura del texto especificado entre paréntesis. |
Vea la chuleta con las propiedades y metodos() de canvas.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var text = "Las Tres Morillas";
ctx.font = "20pt Comic Sans MS";
ctx.textAlign = "center";
ctx.fillStyle = "blue";
// dibuja el texto
ctx.fillText(text,canvas.width / 2, (canvas.height/2)-2);
// translada el contexto en el centro del canvas
ctx.translate(canvas.width / 2, (canvas.height/2)+2);
// voltea horizontalmente el contexto
// el segundo parámetro de scale es un número negativo
ctx.scale(1, -1);
// transparencia
ctx.globalAlpha = 0.1;
// dibuja de nuevo el texto
ctx.fillText(text,0,0);
}
}