Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas básico

Crea tus propios dibujos y animaciones con Canvas en HTML5


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 137

Visitas el mes pasado: 217

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de Canvas del HTML 5
Desarrollo Web
Tutorial de Canvas
mozilla.org
HTML5
htmlya
Empezando a dibujar en Canvas html 5 tutorial
taringa.net
Curva de Bézier
Wikipedia
flashcanvas
code.google.com
HTML5 Canvas tutorial
w3scool
HTML5 Canvas Element Tutorial
html5canvastutorials
The canvas element
HTML Living Standard

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Canvas básico (X)

Textos

imagen canvas

Metodos de texto

Para escribir texto dentro de un canvas podemos usar los métodos fillText() y strokeText().

Estos métodos tienen la siguiente sintaxis:

cxt.fillText("texto",x,y)

cxt.strokeText("texto",x,y)

Los parámetros indican lo mismo en los dos métodos. El primer parámetro es el texto que queremos escribir, y podemos pasarlo directamente entre comillas como una cadena de texto, o mediante una variable. El segundo y tercer parámetro son las coordenadas donde se escribirá el texto en el canvas.

La diferencia entre fillText() y strokeText() es que fillText() dibuja las letras tal y como las veríamos fuera del canvas, mientras que strokeText dibuja una línea alrededor de la letra, dejando hueco lo que es la letra en sí.


Tamaño y estilo.

Las características que definen el aspecto del texto, tales como tamaño, estilo y tipografía se definen mediante la propiedad font.

cxt.font="bold italic 12px arial";

El valor de la propiedad font es el mismo que tendría la propiedad font de CSS, escrito aquí entre comillas. Tal como hacemos en CSS pondremos en primer lugar el grosor y estilo, después el tamaño y después el tipo de fuente.

El color de texto se consigue con las propiedades ya vistas fillStyle y strokeStyle, las cuales cambian el color a fillText() y strokeText() respectivamente.

Veamos un ejemplo. Tenemos un canvas con el siguiente código HTML:

<canvas id="ejemplo1" width="160" height="160">
</canvas>

Ahora escribimos el código javascript para el canvas, recuerda que debes poner antes la función iniciaCanvas() explicada en la segunda página de este manual, y además debemos escribir el código dentro de la función window.onload=function().

cxt1=iniciaCanvas("ejemplo1");
if (cxt1) {
texto="Hola mundo"; //texto de prueba
cxt1.beginPath() //iniciar ruta
cxt1.strokeStyle="blue"; //color externo
cxt1.fillStyle="red"; //color de relleno
cxt1.font="bold 20px arial"; //estilo de texto
cxt1.strokeText(texto,10,30); //texto con método stroke
cxt1.fillText(texto,10,80); //texto con método fill
cxt1.strokeText(texto,10,140); //texto con los dos métodos
cxt1.fillText(texto,10,140);
}

El resultado del canvas anterior lo vemos aquí a la derecha.

Observamos aquí la diferencia entre el método strokeText en la parte de arriba, el método fillText en el centro, o usar los dos métodos en un mismo texto abajo del todo.


Alineación del texto

Por defecto las coordenadas que definimos para el texto marcan el extremo inferior izquierda del mismo. Es decir a partir de ese punto el texto se empieza a escribir por encima y hacia la derecha.

Esto podemos cambiarlo mediante las propiedades de alineación.


Alineación horizontal

La propiedad textAlign controla la alineación horizontal del texto:

cxt.textAlign="start | end | left | right | center";

Los posibles valores que puede tener esta propiedad son:

Los valores start y left por un lado y end y right por el otro son equivalentes mientras usemos alfabetos occidentales, sólamente usando alfabetos con otro sentido de escritura (como el árabe o el japonés), sus valores serían distintos.


Alineación vertical

La alineación vertical se controla con la propiedad textBaseline. vemos aquí su sintaxis y sus valores:

cxt.textBaseline="top | middle | bottom | hanging | alphabetic | ideographic"

Los valores hanging, alphabetic y ideographic están relacionados con los distintos tipos de escritura en distintos tipos de alfabetos (árabe, chino, etc.). Como aquí se supone que vamos a escribir sólo con nuestro alfabeto nos centraremos en los otros tres valores:


Ejemplo de canvas con alineaciones.

Como ejemplo haremos un canvas en el que se vean los distintos tipos de alineación. Para ello primero dibujaremos unas líneas de referencia, y después colocaremos texto en esas líneas para ver cómo quedan las alineaciones.

Como siempre empezamos por el código HTML:

<canvas id="ejemplo2" width="200" height="200">
</canvas> 

Para seguir con el código javascript, que tal como hemos dicho antes, tiene que tener anteriormente la función iniciaCanvas() y ponerlo dentro del window.onload=function().

cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath(); //iniciar ruta
cxt2.strokeStyle="#aaa"; //color relleno y texto
cxt2.fillStyle="navy"; //color líneas
cxt2.moveTo(50,0);  //crear líneas: línea vertical
cxt2.lineTo(50,200); 
for (i=30;i<=180;i+=30) { //varias líneas horizontales
    cxt2.moveTo(0,i);
    cxt2.lineTo(200,i);
    }
cxt2.stroke(); //viisualizar líneas
cxt2.font="14px arial"; //estilo del texto
//Diferentes estilos de alineación horizontal:
cxt2.textAlign="start";
cxt2.fillText("start",50,30);
cxt2.textAlign="end";
cxt2.fillText("end",50,60);
cxt2.textAlign="left";
cxt2.fillText("left",50,90);
cxt2.textAlign="right";
cxt2.fillText("right",50,120);
cxt2.textAlign="center";
cxt2.fillText("center",50,150);
cxt2.textAlign="start"; // volvemos al estilo inicial.
//Diferentes estilos de alineación vertical
cxt2.textBaseline="top";
cxt2.fillText("top",100,30);
cxt2.textBaseline="middle";
cxt2.fillText("middle",100,60);
cxt2.textBaseline="bottom";
cxt2.fillText("bottom",100,90);
cxt2.textBaseline="hanging";
cxt2.fillText("hanging",100,120);
cxt2.textBaseline="alphabetic";
cxt2.fillText("alphabetic",100,150);
cxt2.textBaseline="ideographic";
cxt2.fillText("ideographic",100,180);
}

El resultado puedes verlo en el canvas de la derecha.

A la izquierda están las distintas alineaciones en horizontal, mientras que a la derecha tenemos las distintas alineaciones en vertical. Los puntos de referencia para en el texto de alineación horizontal están puestos encima de la línea vertical, mientras que los puntos de referencia de los textos de alineación vertical están puestos en las distintas líneas horizontales.





En la siguiente página veremos como incorporar imágenes al canvas

Insertar imágenes



Canvas (básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com