javascript - ejemplos - canvas js examples

Tamaño de fuente de Canvas HTML5 basado en el tamaño del lienzo

Question

Tengo el tamaño del lienzo configurado en 1/3 de la ventana.nivelAltura y ventana.inner Ancho del navegador.

La mayoría de los elementos en el lienzo también se establecen en función del ancho y la altura del lienzo, de modo que se reducen en tamaño y se colocan según el tamaño del lienzo.

¿Cómo escalo los tamaños de fuente basados ​​en esto también?

Por ejemplo, el tamaño de letra de la pantalla de inicio de un juego que estoy creando es de 80 puntos. Eso es demasiado grande si el navegador es realmente pequeño. Sale del lienzo.

Answer 1

Debería pensar sus coordenadas como coordenadas virtuales: si el lienzo toma 1/3 de la pantalla, pregúntese: cuánto espacio (relativo) debe tomar la fuente, no su tamaño.
Decida de una vez por todas una resolución virtual de su lienzo, luego dibuje y dibuje todo en esa resolución ... siempre que haya escalado el lienzo antes.

Por ejemplo, podría decidir que su lienzo tiene una resolución virtual de 600X200. Cuando conozca el tamaño real de la ventana, tendrá el tamaño real del lienzo. A continuación, escale el lienzo con una escala (realWidth / 600, realHeight / 200) y todo se verá igual en todos los dispositivos.

Acabo de hacer un pequeño violín para ilustrar, verá que genera la "misma" imagen para un lienzo de tamaño muy diferente:
http://jsbin.com/tisoguve/1/edit?js,output

Answer 2

Muchos diseños receptivos usan puntos de corte de medios para controlar el tamaño de las fuentes.

El tamaño de fuente permanece fijo a través de un rango de tamaños de medios.

En el controlador de eventos de cambio de tamaño, aplique un tamaño de fuente a un rango de tamaños de lienzo:

if(canvas.width<480){
context.font=''14px verdana'';
}else if(canvas.width<768){
context.font=''30px verdana'';
}else{
context.font=''80px verdana'';
}

[Y más eficientemente ...]

Predefina algunos tamaños de fuente para cada formato de medios:

var fontSizes={
phone:{
XSmall:6,
Small:8,
Medium:10,
Large:12,
XLarge:14
},
tablet:{
XSmall:10,
Small:12,
Medium:16,
Large:24,
XLarge:30
},
desktop:{
XSmall:14,
Small:18,
Medium:30,
Large:40,
XLarge:80
},
}

Puede usar estos tamaños de fuente predefinidos para su texto de lienzo:

context.font=fontSizes[media].XSmall+" verdana";
context.fillText("XSmall text",20,20);
context.font=fontSizes[media].Large+" verdana";
context.fillText("Large text",20,20);

Luego, en su controlador de cambio de tamaño, solo tiene que establecer el tipo de medio apropiado.

De esta forma, no necesita recodificar context.font en todas partes de su proyecto.

var media="desktop";
if(canvas.width<480){
media="phone";
}else if(canvas.width<768){
media="tablet";
}else{
media="desktop";
}

Answer 3

No me gusta usar un ancho o alto determinado para ninguna aplicación. En cambio, utilizo el objeto ventana para determinar la cantidad de espacio en la pantalla en lugar de decir "ancho = 1000", se parecería más al código siguiente. Tomo nota de la resolución de pantalla actual que estoy usando, de modo que al ajustar el tamaño del contenido en la pantalla, todo se escala como debería según el tamaño cuando se creó. Suponiendo que la resolución de pantalla original es 1366 y queremos que la fuente original esté en 20 .....

<canvas id="canvas"" width="0" height="0" style="position:relative;" ></canvas>
var canvas = document.getElementById("canvas");
var context= canvas.getContext(''2d'');
var canvas.width = document.body.clientWidth;
var canvas.height = document.body.clientHeight;
var px= 20-(((1366-canvas.width)/1366)*20);
var fontStyle = "italic";
var fontWeight = "bold";
var fontSize = +px+"px";
var fontFamily = "Verdana";
var b = " ";
context.font = fontStyle + b + fontWeight + b + fontSize + b + fontFamily;

Lo he intentado usando Safari, IE, Chrome, Firefox, con una vista de diseño receptivo, y funciona. Al tratar de guardar, escalar y restaurar en mi aplicación, creé una imagen en primer plano con una resolución más baja sobre el lienzo viejo. Tratar de ejecutar un rango de tamaños de medios de la forma en que se muestra arriba parece grande, pensaría. Creo que puedo sentir la tentación de utilizar lo siguiente acompañado de una buena hoja de estilo para el diseño de la página.

var px= 20-(((1366-canvas.width/3)/1366)*20);
context.font = +px+"px";
//place text here for this font
px= 12-(((1366-canvas.width/3)/1366)*12);
context.font = +px+"px";
//place text here for this font

Para otros objetos, trataría de utilizar el mismo enfoque pero, limite las imágenes dibujadas al lienzo con javascript, utilice tanto css con% como sea posible y vuelva a dibujar las imágenes si es necesario para evitar que el usuario escale la página.

context.fillText ("Click To Start", canvas.width/3, canvas.height/1.7);
context.strokeText ("Click To Start", canvas.width/3, canvas.height/1.7); 

Answer 4

Simplemente escale el tamaño de fuente con un factor.

La base

Digamos que el tamaño predeterminado de su lienzo es de 1000 píxeles y el tamaño de la fuente es de 80 píxeles (lienzo convierte pt en píxeles; utilizo 80 aquí para simplificar, vea la parte inferior).

Eso creará una relación de:

ratio = 80 / 1000 = 0.08

Vamos a verificar cuando el ancho del lienzo es de 1000 por multiplicar con esa relación:

fontSize = 1000 * ratio = 80;

Y vemos que tenemos 80 para la fuente como se esperaba.

Ahora que el tamaño del lienzo es más pequeño, digamos 500 píxeles:

fontSize = 500 * ratio = 40;

Eso debería corresponder a la relación. Tenga en cuenta que las fuentes no se comportan de forma lineal, pero será aproximadamente correcta.

Ahora simplemente establece el tamaño de la fuente:

ctx.font = (fontSize|0) + ''px myFont'';

Solución

El código final de esto es en esencia muy simple:

var fontBase = 1000, // selected default width for canvas
fontSize = 70; // default size for font
function getFont() {
var ratio = fontSize / fontBase; // calc ratio
var size = canvas.width * ratio; // get font size based on current width
return (size|0) + ''px sans-serif''; // set font
}

Cada vez que necesite actualizar la fuente (es decir, cambiar el tamaño) simplemente llame a:

ctx.font = getFont(); // call getFont to set new font size

Los valores predeterminados son instantáneas de cualquier tamaño que funcione en el momento / durante el desarrollo.

Demo en vivo

Para convertir el tamaño de punto a píxel simplemente usa el sistema DPI / 72:
80 pt * (96/72) = 107 píxeles a 96 DPI.