Medir texto
El método measureText() devuelve un objeto que contiene la anchura del texto especificado entre paréntesis.
En el siguiente ejemplo utilizamos el método measureText() para calcular el tamaño de fuente para que el texto escogido quepa en el <canvas>
| 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 boton = document.getElementById("boton");
boton.addEventListener("click", function() {
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
// limpiamos el canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// queCita definida al final del script
var texto = queCita();
var tamanoTexto = 30;
ctx.font = tamanoTexto+"px Georgia";
// medimos la anchura del texto
var anchuraTexto = ctx.measureText(texto).width;console.log(anchuraTexto)
//mientras que la anchura del texto > anchura del lienzo - 20px
while( anchuraTexto > canvas.width-20 ){
// reducimos el tamaño del texto con 1 px
tamanoTexto--;
ctx.font = tamanoTexto+"px Georgia";
anchuraTexto = ctx.measureText(texto).width;
}
//ahora que el texto tiene la anchura adecuada
// centramos el texto
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// y publicamos el texto
ctx.fillText(texto, canvas.width/2, canvas.height/2-20);
ctx.font = "15px Georgia";
ctx.fillText("tama\361o texto: "+ tamanoTexto, canvas.width/2, canvas.height/2 + 20);
}
}
},false);
function queCita(){
var citas = document.getElementById("citas");
var index = citas.selectedIndex;
var texto = citas[index].text;
return texto;
}Escoge tu cita favorita y haz clic en "Enviar!"