Aprender los conceptos básicos de HTML5 Canvas Por Hawkes robar en 11 de julio 2011

El conocimiento necesario: Basic JavaScript y HTML

Se requiere: jQuery

Duración del proyecto: 1-2 horas

DESCARGAR ARCHIVOS DE CÓDIGO FUENTE

En el capítulo 3 de su libro, la Fundación HTML5 Canvas, Rob Hawkes explica cómo utilizar el elemento de tela,

dibujar formas básicas y de texto, cambiar el color, borrar el lienzo y la forma para que se llene la ventana del

navegador

Este extracto es el capítulo 3 de la Fundación HTML5 Canvas: para juegos y entretenimientopor Hawkes Rob.

A estas alturas usted ya debe tener una buena idea acerca de lo que es de lona y por qué es una parte fantástica de

HTML5. En este artículo vamos a echar un vistazo adecuada a las características de la tela, de aprender a realmente entrar

en un documento HTML para dibujar formas y otros tipos de objetos sobre ella. También vamos a buscar la forma de

cambiar la forma en las formas y los objetos se dibujan sobre lienzo, así como encontrar la manera de borrar. Por último,

vamos a terminar con un ejemplo que muestra cómo hacer tela del mismo tamaño que la ventana del navegador, una

habilidad esencial que tienen para el desarrollo de juegos inmersivos. Espero que al final de este tutorial que te sientas aún

más entusiasmados con lienzo HTML5 y las posibilidades que se abre delante de usted.

ANUNCIO

Obtención de amistad con el elemento canvas Al igual que video y audio, el elemento canvas utiliza absolutamente ningún plug-ins externos o el vudú para hacer su

cosa. Todo lo que necesitas es algo de HTML y un poco de cortesía de la API de JavaScript prestación contexto 2d. No se

preocupe si usted no tiene idea de lo que la API de renderizado 2D contexto es en este momento - usted será un experto en

ella muy pronto.

Utilizando el elemento canvas es simple - y me refiero a realmente, realmente simple. El siguiente código es todo lo que

necesita para empezar con él:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. <canvas width = altura "500" => "500"

2. <- Insertar contenido de reserva aquí ->

3. </ Canvas>

Supongo que debo ser honesto y decirle que esto no hace nada espectacular. Lo único que hace es crear un elemento nuevo

lienzo en blanco, pero usted no será capaz de ver nada porque no he hecho nada con el contexto de representación

2D. Vamos a llegar a dibujar cosas en el lienzo en breve, que es simple también.

Por el momento, es importante tener en cuenta los atributos de anchura y altura se utilizan al crear el elemento

canvas. Estos atributos obviamente definir el tamaño del elemento de tela, que a su vez definen el tamaño de la contexto de

representación 2d. Sin la definición de un tamaño como esta el elemento de tela y el contexto de renderizado 2D se

establecería en la anchura y altura por defecto de 300 por 150, respectivamente. Más adelante en este capítulo vamos a ver

las maneras de crear un elemento de tela que cambia de tamaño de forma dinámica y llena toda la ventana del navegador.

Nota: La posición del elemento Canvas se define por su ubicación dentro de su documento HTML. Se puede mover con

CSS como se requiere, al igual que otros elementos HTML.

Compatibilidad con navegadores para tela

Mayoría de los navegadores actuales son compatibles con el elemento de tela y la mayoría de sus características, pero no es

ninguna sorpresa que Internet Explorer no lo hace, al menos no en cualquier versión anterior de Internet Explorer 9. Si usted

es feliz con este hecho de la vida, entonces usted puede poner un mensaje adecuado en el contenido de reserva para el

elemento de tela que le permite a los usuarios de IE pobres saben que deben mejorar. La otra opción es utilizar el script de

ExplorerCanvas fantástica, que ha sido desarrollado por algunos cerebritos de Google. La belleza de este método es que

sólo se necesita incluir un script en su página web y el elemento de tela funcionan en navegadores de Internet Explorer

anteriores a la versión 9.

Si esto es algo que le interesa a continuación, usted debe descargar el script desde lapágina web ExplorerCanvas y siga las

instrucciones para su instalación.

El contexto de representación 2D El elemento canvas no es la parte divertida de la lona en absoluto, que la fama se cae el contexto de trazado 2D, la pieza de

impresionante que se dibuja absolutamente todo a. El propósito del elemento canvas es actuar como un contenedor del

contexto de representación 2D, que le proporciona todos los métodos necesarios y la funcionalidad jugosa a los que recurrir

y manipularlo. Es muy importante entender esto, así que quiero dejar claro: que se basan en el contexto de trazado 2D, no el

elemento canvas. Puede acceder y mostrar el contexto de representación 2D a través del elemento canvas. No espero que

esto tenga sentido completo, sin embargo, mi esperanza es que las cosas van a aclarar un poco cuando te quedas atascado en

el lienzo con el uso por sí mismo.

El sistema de coordenadas

El contexto de representación 2D es un estándar de pantalla de la plataforma basada en el dibujo. Al igual que otras

plataformas en 2D, se utiliza un sistema de plano de coordenadas cartesianas con el origen (0, 0) en la parte superior

izquierda. Moviéndose a la derecha se incrementará el valor de x, y moviéndose hacia abajo, aumentará el valor de y. La

comprensión de cómo funciona el sistema de coordenadas es integral, si usted quiere tener las cosas dibujar en el lugar

correcto.

Representación 2D del sistema de coordenadas cartesianas contexto

Una sola unidad en el sistema de coordenadas es por lo general equivale a un píxel en la pantalla, por lo que la posición (24,

30) sería de 24 píxeles derecha y 30 píxeles hacia abajo.Hay algunas ocasiones en las que una unidad en el sistema de

coordenadas puede igualar 2 píxeles, al igual que con pantallas de alta definición, pero la regla general es que una unidad de

coordenadas es igual a 1 pixel de la pantalla.

Acceso al sistema de renderizado 2D

No hay poniéndome y quitándome punto en torno al tratar de explicar todo esto en palabras cuando pudiéramos empezar a

usarlo. Así que vamos a hacer justamente eso mediante la creación de una página básica web HTML con un elemento de

lienzo en blanco:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. <! DOCTYPE html>

2.

3. < html >

4. < cabeza >

5. < título > Aprender los fundamentos de la tela </ title >

6. < meta charset = "UTF-8">

7.

8. < script de type = "text / javascript" src = "http://ajax.googleapis.com

9. / Ajax/libs/jquery/1/jquery.min.js "> </ script de >

10.

11. < script de type = "text / javascript">

12. $ (Document). Ready (function () {

13.

14. });

15. </ script de >

16. </ cabeza >

17.

18. < cuerpo >

19. <canvas id = ancho de "myCanvas" = altura "500" => "500"

20. <- Insertar contenido de reserva aquí ->

21. </ Canvas>

22. </ cuerpo >

23. </ html >

Usted no verá nada si se ejecuta tal como está, así que vamos a tener acceso al contexto de representación 2D para que

podamos empezar a dibujar cosas. Coloque el siguiente dentro de la declaración de jQuery, al igual que hicimos con los

anteriores ejemplos de JavaScript:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. var lienzo = $ ("# MiCanvas");

2. var context = lienzo de conseguir (0) getContext ("2D")..;

Todo lo que estamos haciendo aquí es asignar el elemento de tela a una variable a continuación, asignar el contexto de

representación 2D a otra variable llamando al métodogetContext. Debo señalar que, debido a que estamos usando jQuery,

es necesario llamar al método get para que acceder al DOM para el elemento de tela, de allí que a continuación, tener acceso

al método de lona getContext. Yo no me preocuparía demasiado por tratar de entender por qué: sólo ser conscientes de que

el método get no tiene nada que ver con el lienzo en sí.

Ahora tenemos una variable que contiene el contexto de representación 2D, podemos empezar a dibujar algo. Son tiempos

excitantes! Agregue la línea siguiente después de declarar la variable de contexto:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto fillRect (40, 40, 100, 100);

Si actualizas la página verás algo increíble ha sucedido, un cuadrado negro ha aparecido!

Dibujo de un objeto con tela

Usted acaba de sacar su primer elemento con lona. Se siente bien, ¿no? La plaza es de color negro debido a que es el color

predeterminado de los elementos elaborados con lienzo, vamos a buscar la forma de usar algo que no sea el color

predeterminado más adelante en este capítulo.

Dibujo de formas básicas y líneas de Como puede ver, dibujar un cuadrado es bastante sencillo, es sólo una línea de código, el método fillRect:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto fillRect (40, 40, 100, 100);

Lo obvio que notará es que el método se llama fillRect y no fillSquare. Estoy seguro que la mayoría de ustedes ya saben

que un cuadrado es en realidad un rectángulo con lados de la misma longitud, pero para aquellos que no lo hacen, una plaza

es en realidad un rectángulo con lados de la misma longitud!

Hay cuatro argumentos necesarios para crear un rectángulo. Los dos primeros son las coordenadas (x, y) los valores de

coordenadas para el origen de la plaza (la esquina superior izquierda), y los dos últimos son la anchura y la altura del

rectángulo. La anchura de un rectángulo se dibuja a la derecha de la posición (x, y), y la altura del rectángulo se dibuja hacia

abajo desde la posición (x, y). Usted puede ver por qué es importante saber cómo funciona el sistema de coordenadas, de lo

contrario puede haber asumido la altura atraería hacia arriba desde la posición (x, y). El método fillRect podría reescribirse

como esto para visualizar los argumentos:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto fillRect (x, y, ancho, alto);

En aras de la claridad, cambie el valor de la anchura de nuestra plaza a 200, guarde el archivo y actualizar la página.

Qué sorpresa, es un rectángulo. Y para dibujar el rectángulo en una posición diferente? Sí, basta con cambiar las

coordenadas (x, y) los valores de posición. Por ejemplo, una posición x de 200 y ay posición de 300.

Dibujar un rectángulo en una posición diferente

Esta es la belleza de la tela, es ridículamente fácil de manipular los objetos que ha dibujado, que acaba de cambiar los

valores de un par de argumentos.

Nota: Puede no parecer obvio, pero si robas algo con un punto de origen más allá de las dimensiones del elemento canvas,

que no aparecerá en la pantalla. Sólo las formas dibujadas con un punto de origen o en alguna parte de la forma interior del

elemento canvas será visible para usted.

Junto a fillRect es el método strokeRect, el gemelo malvado. Considerando que el fillRectdibuja un rectángulo y lo rellena

con un color (en nuestro caso negro), el métodostrokeRect dibuja un rectángulo y la acaricia. Eso no quiere decir

que strokeRect le da una palmadita suave con la mano (que no sería un gemelo malvado, si era tan bonita), sino que

significa que el contorno del rectángulo tiene una línea trazada a su alrededor. Si cambia el

ejemplo fillRect utilizar strokeRect vez verás a qué me refiero.

Dibujar un rectángulo acarició

El rectángulo tiene ahora un esbozo, es efectivamente hueco. Ahora bien, esto es divertido y todo, pero ¿qué hay que

intentar algo un poco más aventureros, como una línea en toda regla? ¿Por qué no.

Líneas

Las líneas se crean un poco diferente a las formas. Son en realidad se conoce como rutas de acceso. Para crear un trazado

simple, usted tiene que llamar primero al métodoBeginPath en el contexto de renderizado en 2D, lo que efectivamente dice:

"prepárate, que vamos a empezar a dibujar un camino." El siguiente método para llamar es moveTo, que establece el (x, y)

al origen del camino que está a punto de dibujar. Después de esto es un llamado a lineTo con la (x, y) del destino de nuestra

línea, con una llamada a closepathpara terminar de dibujar el camino. Por último, una llamada a un accidente

cerebrovascular se hacen de la línea visibles al dibujar su contorno. Al poner todo esto junto vienes con algo como esto:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto BeginPath (); / / Inicia el camino

2. . contexto moveTo (40, 40); / / Establecer el origen de ruta

3. . contexto lineTo (340, 40); / / Establecer la ruta de destino

4. . contexto closepath (); / / Cerrar el camino

5. . contexto de accidente cerebrovascular (); / / Esquema de la ruta

¿Qué debería tener este aspecto, una línea recta agradable y aburrido:

Las líneas no tienen por qué ser horizontal o vertical, sin embargo, al cambiar los argumentos (x, y) del

método lineTo puedes hacerlo en diagonal:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto lineTo (340, 340);

Las líneas rectas no son poderosos por sí alentadores, pero se pueden combinar para producir formas complejas

que son emocionantes. Voy a ir a través de las características avanzadas de rutas en el próximo capítulo. Por ahora, vamos a

intentar algo más. ¿Qué hay de los círculos de giro? Son sin duda un poco más emocionante.

Círculos

No hace falta ser un genio para darse cuenta de los círculos son muy diferentes a los rectángulos. Sin embargo, sabiendo

que esto en cierto modo a explicar por qué la creación de un círculo en el lienzo es muy diferente a la creación de un

rectángulo. Un círculo es una forma bastante compleja, y debido a esto no es en realidad un método especial en lienzo para

crear un círculo. Lo que hay es un método para arcos de dibujo, que es todo un círculo realmente es: un arco se unió en

ambos extremos. Es un poco confuso, así que ¿qué hay que saltar y crear un círculo en el lienzo:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto BeginPath (); / / Inicia el camino

2. . contexto de arco (230, 90, 50, 0, Matemáticas PI * 2, falsa.); / / Dibujar un círculo

3. . contexto closepath (); / / Cerrar el camino

4. . contexto fill (); / / Llenar el camino

Usted ya debe reconocer a las primeras y últimas dos líneas, que acaba de iniciar y cerrar el camino (el arco) y luego la

rellenan cuando hayamos terminado (el método de relleno es compañero de carrera). La parte jugosa es la segunda línea,

que hace todo lo necesario para dibujar un círculo. Puede parecer un poco complicado, así que vamos a dividirla para usted.

Hay seis argumentos utilizados en la creación de un arco, el (x, y) valores de coordenadas para el origen del arco (el centro

del círculo, en nuestro caso), el radio del arco, el ángulo inicial, el ángulo final y, finalmente, un valor booleano que dibuja

el arco hacia la izquierda si es verdad, o hacia la derecha si es falso. El método de arco puede ser reescrito de una manera

más fácil de leer así:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto de arco (x, y, radio, startAngle, endAngle, hacia la izquierda);

Los tres primeros argumentos son fáciles de entender así que voy a saltar más allá de los. El ángulo de inicio y los

argumentos finales de ángulo son aparentemente simple, pero que merecen algunas explicaciones para entender

adecuadamente cómo funcionan. En resumen, un arco en lienzo se define como una trayectoria curva que se inicia a una

distancia desde el origen (x, y) igual al radio, y se encuentra en el ángulo definido por el ángulo inicial. El camino termina

en el radio final un ángulo de distancia desde el origen (x, y).

Es importante tener en cuenta que los ángulos en lona están en radianes y grados no y, sin entrar en demasiados detalles, es

seguro asumir que 360 grados (un círculo completo) es 2π (pi multiplicado por 2) radianes. La gente mucho más inteligente

que yo he trabajado la manera de convertir de grados a radianes y han llegado con la siguiente fórmula (escrito en

JavaScript para nuestros propósitos):

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. grados var = 1 / / 1 grado

2. var radianes = grados * (Math. PI / 180); / / 0,0175 radianes

Vamos a estar usando radianes lo largo del libro, ya que nos salva de realizar conversiones innecesarias de grados, de modo

de hacer las cosas más fáciles que usted puede utilizar la imagen de abajo como una guía rápida para el ángulo a lo largo de

un círculo en radianes.

Conversión entre grados y radianes

Para algo más complicado que puedes usar la fórmula descrita anteriormente.

Así que ya saben cómo trabajar en ángulos de lienzo. Vamos a poner el foco de nuevo al ejemplo del círculo. Se puede ver

ahora que el ángulo inicial es 0, el comienzo de nuestro arco, y el ángulo final es Math.PI * 2 (pi multiplicado por 2); estos

ángulos son el comienzo y el final de un círculo. Si no me cree, a continuación, echa un vistazo a la imagen de arriba.

Nota: Para obtener acceso al valor de pi en JavaScript se utiliza el objeto de Matemáticas,que es un objeto especial que le

permite hacer todo tipo de fría matemática basada en esas cosas. Vamos a utilizar en el futuro para tareas como la

generación de números aleatorios.

Si ejecuta el ejemplo que usted debe conseguir una visualización en el navegador de esta manera:

Un círculo, ¡Hurra! Ahora, ¿cuál sería el ángulo final que si usted quiere dibujar la mitad de un círculo en su

lugar? Compruebe la imagen de arriba si lo desea. Eso es correcto, sería simple y llanamente π, que se parece a esto en

JavaScript:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto de arco (230, 90, 50, 0, matemáticas PI, falso.); / / Dibujar un círculo semi-

Si todo ha ido bien debería tener un hermoso semicírculo en su navegador.

Aunque el sexto argumento en el método de arco está destinado a ser opcional, Firefox se produce un error si se deja

fuera. Debido a esto, vale la pena tener en ella y definir explícitamente una dirección para sacar el arco.

Se puede jugar con los ángulos de todos los días para crear cuartos de círculo, la pizza rodajas de todo tipo realmente. Sin

embargo, lo voy a dejar a usted si usted quiere jugar un poco con eso. Tenemos cosas más importantes que hay que seguir

adelante con, como cambiar el color de las cosas!

Estilo El negro es para la temporada pasada. Si hubiera una manera de cambiar el color de nuestras formas y líneas. Espera, que

hay? Y es muy fácil? Al igual que una línea de código fácil? ¡Impresionante! No estoy mintiendo acerca de que sea fácil el

camino. Vamos a saltar directamente y cambiar el color de la plaza se hizo al principio del capítulo.

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. contexto fillStyle = "rgb (255, 0, 0)".;

2. . contexto fillRect (40, 40, 100, 100);

Al establecer la propiedad FillStyle del contexto de representación 2d usted es capaz de cambiar el color que las formas y

los caminos están llenos como. En el ejemplo anterior, una RGB (rojo, verde y azul) se le asigna un valor de color, aunque

también se podría utilizar cualquier valor válido CSS color, como un código hexadecimal (por ejemplo, # FF0000 o la

palabra "rojo"). En el ejemplo, el color es rojo (rojo intenso, verde, no, no hay color azul) y su cuadrado debe ser algo como

esto:

Te dije que era fácil, pero no te emociones demasiado, ya que hay un lado negativo. La cuestión es que el establecimiento

de la propiedad FillStyle significa que todo se dibuja después de establecer que será en ese color. Este no es un problema si

eso es lo que queremos que suceda, pero es importante tener en cuenta en caso de que sólo quería cambiar el color de un

objeto. Una forma de evitar esto es para establecer la propiedadfillStyle de nuevo al negro (u otro color) una vez que ha

dibujado los objetos al lienzo, así:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. contexto fillStyle = "rgb (255, 0, 0)".;

2. . contexto fillRect (40, 40, 100, 100); / / Plaza Roja

3. . contexto fillRect (180, 40, 100, 100); / / Plaza Roja

4.

5. contexto fillStyle = "rgb (0, 0, 0)".;

6. . contexto fillRect (320, 40, 100, 100); / / Negro cuadrados

¿Qué tendrá este aspecto en el navegador:

También puede hacer lo mismo con las formas trazadas y caminos mediante el uso de la propiedad strokeStyle. Por

ejemplo, el siguiente es el mismo ejemplo anterior, excepto que está usando acarició esboza en lugar de rellenos:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. contexto strokeStyle = "rgb (255, 0, 0)".;

2. . contexto strokeRect (40, 40, 100, 100); / / Plaza Roja

3. . contexto strokeRect (180, 40, 100, 100); / / Plaza Roja

4.

5. contexto strokeStyle = "rgb (0, 0, 0)".;

6. . contexto strokeRect (320, 40, 100, 100); / / Negro cuadrados

Nota: No hay nada que nos impida la combinación de ambos fillStyle y strokeStyle para dar una forma un relleno y el trazo

que son colores completamente diferentes.

No hay nada complicado aquí, todas son cosas muy básicas. Es tan fácil como cambiar el color de las líneas, así:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. contexto strokeStyle = "rgb (255, 0, 0)".;

2. . contexto BeginPath ();

3. . contexto moveTo (40, 180);

4. . contexto lineTo (420, 180); línea / / Rojo

5. . contexto closepath ();

6. contexto de accidente cerebrovascular ().;

7.

8. contexto strokeStyle = "rgb (0, 0, 0)".;

9. . contexto BeginPath ();

10. . contexto moveTo (40, 220);

11. . contexto lineTo (420, 220); línea / / Negro

12. . contexto closepath ();

13. contexto de accidente cerebrovascular ().;

Y eso es todo lo que hay que cambiar de color en el lienzo.

Cambiar el ancho de línea

Cambiar el color es muy divertido, pero los ejemplos de la línea han sido un poco en la parte delgada. Afortunadamente en

el lienzo, no es un método de engorde un poco, y que es propiedad de la anchura de línea el contexto de representación

2D. Por defecto, la propiedad de anchura de línea se establece en 1, pero usted puede configurarlo para que todo lo que

quieras. Por ejemplo, vamos a cambiar el ancho de las líneas de color rojo y negro:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto de anchura de línea = 5; / / Hacer que las líneas gruesas

2.

3. contexto strokeStyle = "rgb (255, 0, 0)".;

4. . contexto BeginPath ();

5. . contexto moveTo (40, 180);

6. . contexto lineTo (420, 180); línea / / Rojo

7. . contexto closepath ();

8. contexto de accidente cerebrovascular ().;

9.

10. contexto de anchura de línea = 20;. / / Hacer que las líneas aún más grueso

11.

12. contexto strokeStyle = "rgb (0, 0, 0)".;

13. . contexto BeginPath ();

14. . contexto moveTo (40, 220);

15. . contexto lineTo (420, 220); línea / / Negro

16. . contexto closepath ();

17. contexto de accidente cerebrovascular ().;

El resultado de esto es una línea un poco más gruesa de color rojo y negro de una línea demasiado gruesa:

Y anchura de línea funciona igual de bien en las formas:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto de anchura de línea = 5; / / Hacer que las líneas gruesas

2.

3. contexto strokeStyle = "rgb (255, 0, 0)".;

4. . contexto strokeRect (40, 40, 100, 100); / / Plaza Roja

5. . contexto strokeRect (180, 40, 100, 100); / / Plaza Roja

6.

7. contexto de anchura de línea = 20;. / / Hacer que las líneas aún más grueso

8.

9. contexto strokeStyle = "rgb (0, 0, 0)".;

10. . contexto strokeRect (320, 40, 100, 100); / / Negro cuadrados

Que, como usted probablemente ha adivinado, hace dos cuadrados rojos ligeramente más gruesas con un cuadrado negro

demasiado espeso.

Usted ha prácticamente dominado los fundamentos ahora, pero todavía hay un par de cosas que quedan por recorrer antes de

pasar a las cosas realmente bien.

Dibujar texto

Canvas no es sólo para gráficos e imágenes, también se puede utilizar para mostrar texto.Aunque si voy a ser sincero, no

hay muchas ocasiones en la elaboración de texto usando Canvas es una mejor opción en comparación con la creación de

texto con un enfoque más tradicional elemento HTML (como con el elemento PA). Me explico.

Texto en el lienzo se dibuja como una imagen, lo que significa que no se puede seleccionar con el cursor del ratón como un

texto normal en un documento HTML no es en realidad el texto, sólo se parece a él. Si ha utilizado Microsoft Paint antes,

entonces vas a entender lo que quiero decir, una vez el texto ha sido elaborado no se puede editar a menos que borrarlo y

volver a dibujar de nuevo. El beneficio para dibujar texto en el lienzo es que se puede utilizar todas las transformaciones

maravillosas y otras que cuenta con el dibujo en el lienzo.Sin embargo, debo subrayar que no se debe crear un texto en el

lienzo, a menos que tenga una razón legítima para no crear utilizando los elementos normales, HTML seleccionables. En su

lugar, usted debe utilizar los elementos normales de HTML para crear un texto, y luego en capas en la parte superior de la

tela con el posicionamiento CSS. El punto aquí es que el HTML fue construido para tratar con el texto (contenido), mientras

que la tela se ha construido para hacer frente a píxeles y gráficos.

Ahora que es la forma en que puede mostrar cómo dibujar texto en el lienzo, es muy fácil:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. var texto = "Hola, Mundo!";

2. . contexto fillText (texto, 40, 40);

Eso es todo lo que necesita para dibujar una cadena de texto. El método fillText del contexto de representación 2d toma

cuatro argumentos (uno es opcional, por lo que he dejado por ahora), la primera es la cadena de texto que se quiere dibujar,

y el segundo y el tercero son los (x, y ) valores de coordenadas para el origen del texto (la parte inferior izquierda). Te dije

que era fácil.

Yo no le mostrará la salida por el momento, ya que va a ser demasiado pequeña para ver, esto es debido a la configuración

de fuente por defecto para el texto en el lienzo son 10px sans-serif (absolutamente minúscula). Así que vamos a cambiar el

tamaño de ahora, y mientras estamos en ello puede ser que también le mostrará cómo cambiar la fuente. Para hacer esto

usted necesita para establecer la propiedad de la fuente del contexto de representación 2D, de este modo:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. var texto = "Hola, Mundo!";

2. . contexto font = "30px serif"; / / Cambiar el tamaño y la fuente

3. . contexto fillText (texto, 40, 40);

La propiedad font tiene un valor de cadena exactamente de la misma manera que la propiedad de la fuente en CSS. En el

ejemplo anterior, le dará el tamaño en píxeles que quieren ser la fuente, seguido por el nombre de la familia de la fuente que

desea utilizar.Usted lo ha establecido en serif que significa que la fuente predeterminada en el equipo que es un tipo serif

(algo así como Times New Roman). Cuando se ponen juntos debe ser algo como esto:

Eso es un poco mejor, en realidad se puede leer ahora. Usted podría incluso hacer que el texto en cursiva, si realmente

quería al hacer esto:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. var texto = "Hola, Mundo!";

2. . contexto font = "30px cursiva serif";

3. . contexto fillText (texto, 40, 40);

Todo lo que ha cambiado aquí es la palabra en cursiva ha sido añadido a la cadena de fuente.

Como la propiedad de la fuente se que hay muchas opciones más que puedes utilizar, como la altura de la línea, y las

familias de reserva de la fuente. Yo no le dará cobertura a estos, pero si usted está interesado en el uso de texto en el lienzo,

entonces sugiero que usted los visita.

Nota: Espero que usted puede ver, los fundamentos de la tela son muy fáciles de entender.La razón de esto es que la

representación 2d contexto API utiliza métodos y propiedades que se denominan de una manera que hace que sean fáciles

de entender. Ahora debe tener sentido por la que destacó la importancia de nombrar las variables adecuadamente en el

capítulo 2.

Antes de continuar, déjame que te enseñe cómo crear este texto acarició es útil saber lo siguiente:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. var texto = "Hola, Mundo!";

2. . contexto font = "60px cursiva serif";

3. . contexto strokeText (texto, 40, 100);

Esta vez usted está utilizando el método strokeText, que tiene exactamente los mismos parámetros que fillText. Se parece

un poco raro en un tamaño de fuente pequeño por lo que en este ejemplo, el tamaño es más grande y el origen se ha movido

ligeramente hacia abajo para que el texto no se salga de la parte superior de la pantalla. Debe tener un aspecto un poco de

algo como esto:

En general no veo mucho entusiasmo al texto acarició, pero es posible que tenga un proyecto increíble que simplemente no

estaría completa sin él. Si ese es el caso, entonces te sugiero que te sientas mal hacia fuera y se vuelven locos con ella.

Borrado de la lona Sobre la base de la tela es muy divertido, pero ¿qué hacer cuando se comete un error o desea limpiar la pizarra y dibuja algo

más? Afortunadamente, hay dos opciones a su disposición: el método clearRect, o el truco anchura / altura. Echemos un

vistazo al métodoclearRect del contexto de renderizado 2D en primer lugar.

Digamos que has dibujado un cuadrado y un círculo en el lienzo:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto fillRect (40, 40, 100, 100);

2.

3. . contexto BeginPath ();

4. . contexto de arco (230, 90, 50, 0, Matemáticas PI * 2, falsa.);

5. . contexto closepath ();

6. . contexto fill ();

Y ahora que ha decidido, por alguna razón, que desea limpiar el lienzo en blanco. Para ello todo lo que necesita hacer es

llamar clearRect con la (x, y) el origen de nuestro lienzo, su anchura y su altura. Si la tela es 500 píxeles de ancho y 500

píxeles de la llamada aclearRect se vería así:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto clearRect (0, 0, 500, 500);

Lo cual, cuando es ejecutado, se mostrará nada en el navegador, ya que acaba de limpiar todo el lienzo limpio. También se

puede incluso llamar clearRect cuando no se conoce el tamaño del lienzo mediante el uso de la anchura de jQuery y

métodos de altura, así:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto clearRect (0, 0, ancho de tela (), lienzo de la altura ()..);

¿Cuál sería el siguiente en su totalidad:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. var lienzo = $ ("# MiCanvas");

2. var context = lienzo de conseguir (0) getContext ("2D")..;

3.

4. . contexto fillRect (40, 40, 100, 100);

5.

6. . contexto BeginPath ();

7. . contexto de arco (230, 90, 50, 0, Matemáticas PI * 2, falsa.);

8. . contexto closepath ();

9. . contexto fill ();

10.

11. . contexto clearRect (0, 0, ancho de tela (), lienzo de la altura ()..);

He incluido la variable lienzo original en este ejemplo solo para recordarle que lo estamos llamando desde el

método clearRect.

Nota: El elemento canvas de hecho le proporciona propiedades width y height, por lo que depende de usted si desea utilizar

el modo de jQuery, o la forma en JavaScript puro de acceso a las dimensiones del lienzo.

Usted no tiene que limpiar todo el lienzo sin embargo, usted puede fácilmente borrar un área particular de la misma. Por

ejemplo, si queremos eliminar sólo la plaza en el ejemplo a continuación, que podría llamarse clearRect así:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto clearRect (40, 40, 100, 100);

¿Qué te deja con un círculo solitario.

La forma en que esto funciona es que los argumentos en clearRect se puede cambiar para un área muy específica está

desactivada. En nuestro caso nos hemos movido el origen de la zona que desea borrar (la parte superior izquierda) para ser

la parte superior izquierda de la plaza (40, 40), y la anchura y la altura de la zona que desea borrar se ha fijado a la anchura

y la altura de la plaza (100). El resultado es que sólo una zona específica alrededor de la plaza se fija para ser limpiado. Se

podría fácilmente eliminar el círculo en lugar cambiando los argumentos de clearRect a lo siguiente:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. contexto clearRect (180, 40, 100, 100).;

Lo cual, si nuestros cálculos son correctos, debería dejarnos con sólo una plaza.

Recuerde que el origen de un arco es su centro, así que para obtener el origen correcto para el método clearRect tenemos

que tomar el origen del arco y restar su radio, tanto para el xe y.

No es que lo que usted necesita para hacer esto, pero no hay nada que le impida borrar sólo una parte de un objeto en el

lienzo:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto fillRect (40, 40, 100, 100);

2.

3. . contexto BeginPath ();

4. . contexto de arco (230, 90, 50, 0, Matemáticas PI * 2, falsa.);

5. . contexto closepath ();

6. . contexto fill ();

7.

8. . contexto clearRect (230, 90, 50, 50);

En este ejemplo se debe tomar una gran porción de su círculo:

Esta técnica se utiliza a veces para dibujar formas complejas de forma rápida y sencilla mediante la elaboración de una

forma básica y cortar pedazos fuera de ella.

El truco anchura / altura

Si sólo desea borrar todo lo que en el lienzo y volver a empezar desde cero, entonces es posible que desee considerar el

truco anchura / altura. Si soy honesto, esto no es realmente un truco, sino más bien un método potente y poco documentado

para restaurar un lienzo de nuevo a su valor predeterminado, estado fresco. La idea es que cuando los atributos de anchura y

altura de un elemento de tela se establecen, en cualquier momento, la tela debe ser limpiado de nuevo a su estado

original. Este método tiene algunas desventajas, por lo que te voy a dar un ejemplo:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. contexto fillStyle = "rgb (255, 0, 0)".;

2.

3. . contexto fillRect (40, 40, 100, 100);

4.

5. . contexto BeginPath ();

6. . contexto de arco (230, 90, 50, 0, Matemáticas PI * 2, falsa.);

7. . contexto closepath ();

8. . contexto fill ();

Esto dibuja un cuadrado y un círculo rojo sobre el lienzo, sin embargo, nada loco. Ahora vamos a añadir en el

restablecimiento del lienzo:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . tela attr ("ancho", lienzo de ancho ().);

2. . tela attr ("altura", lienzo de la altura ().);

¿Qué está pasando aquí es un poco de la magia de jQuery. Es necesario cambiar los atributos de anchura y la altura del

elemento canvas, por lo que para ello se utiliza el método attr en jQuery. Mi esperanza es que a estas alturas ya debe ser

suficientemente cómoda como para adivinar lo que está pasando. Si no es así, estamos pasando el nombre del atributo que

desea editar (ancho y alto), seguido por el valor que queremos ponerlo a (la misma anchura y altura como lo fue

anteriormente). Si todo ha ido bien debería ver un lienzo en blanco.

Ahora agregue la siguiente línea después de limpiar el lienzo con el truco de anchura / altura:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. . contexto fillRect (40, 40, 100, 100);

Seguramente esto debe dibujar un cuadrado rojo, ¿verdad? (Recuerde:. Que se establece la

propiedad fillStyle anteriormente) ¿Por qué en la tierra es dibujar un cuadrado negro?

La desventaja con el truco de ancho / alto es que absolutamente todo en el lienzo se restablece, incluyendo los estilos y

colores. Es por eso que sólo se debe usar este truco si usted está dispuesto a restablecer por completo el lienzo, no sólo

limpie la pantalla limpia.

Hacer de lona llena la ventana del navegador Hasta ahora, el elemento de tela ha estado a un ancho fijo y altura de 500 píxeles, que es grande, pero lo que si queremos

que se llene la ventana del navegador. ¿Cómo lo haces?Bueno, con un elemento de HTML normal que normalmente puede

establecer la anchura yla altura de los atributos al 100% y que está ordenado todo. Sin embargo, el elemento de tela no

funciona de esta manera y pasa por alto el porcentaje, la interpretación de un 100% hasta 100 píxeles, 200% de 200 píxeles,

y así sucesivamente. Un método diferente es necesario.

La forma más sencilla de hacerlo es establecer la anchura y la altura del elemento canvas, precisamente, a la anchura y

altura en píxeles de la ventana del navegador. Podemos tener acceso a la anchura y la altura de la ventana utilizando el

objeto ventana del navegador y un poco de magia de jQuery:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. var lienzo = $ ("# MiCanvas");

2. var context = lienzo de conseguir (0) getContext ("2D")..;

3.

4. tela attr ("ancho", $ (window) obtener (0) innerWidth..).;

5. . tela attr (. "altura", $ (window) obtener (0) innerHeight.);

6.

7. context. fillRect ( 0 , 0 , canvas. width ( ) , canvas. height ( ) ) ;

The reason I've used $(window).get(0).innerHeight instead of $(window).height() is that the latter doesn't seem to return

the full height in all browsers. You'll notice that this method hasn't actually worked properly as there is still a white gap

around the canvas element and scrollbars in the browser window:

To fix this we need to use some CSS, so open up a new file in your favourite text editor and save it as canvas.css in the

same directory as your HTML document. Put this inside of the CSS file and save it:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. * { margin : 0 ; padding : 0 ; }

2. html , body { height : 100% ; width : 100% ; }

3. canvas { display : block ; }

The first line resets the margin and padding of every HTML element to 0, removing the white border you can see in the

screenshot above. This is commonly known as a CSS reset; there are much better ways of doing it, but this will serve our

purposes right now. The second line isn't entirely necessary, but makes sure that the html and body elements are the full

width and height of the browser window. The final line changes the canvas element from inline to block, which allows the

width the height to be set properly, in turn allowing it to take the full width and height of the browser window without

causing scrollbars.

To use this CSS in the HTML document you need to add the following line before the jQueryscript element, inside of

the head element:

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. < link href = "canvas.css" rel = "stylesheet" type = "text/css" >

This links to the CSS file you just created and runs the styles within it. The result is a canvas element that perfectly fills the

browser window.

Unfortunately we're not done yet. If you resize the browser window the canvas element will stay at the size it was before,

causing scrollbars if you shrink it too much:

To get around this you need to resize the canvas element at the same moment that the browser window is resized. If only

jQuery had a resize method that was fired at the moment a browser window was resized, a little like how the ready method

is fired when the DOM is ready. Well luckily for us, it does have have a resize method, and it does exactly that!

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE

1. $ ( window ) . resize ( resizeCanvas ) ;

2.

3. function resizeCanvas ( ) {

4. canvas. attr ( "width" , $ ( window ) . get ( 0 ) . innerWidth ) ;

5. canvas. attr ( "height" , $ ( window ) . get ( 0 ) . innerHeight ) ;

6. context. fillRect ( 0 , 0 , canvas. width ( ) , canvas. height ( ) ) ;

7. };

8.

9. resizeCanvas ( ) ;

There isn't much new here, most of the code has just been moved around a little. The main addition is the

jQuery resize method which has been set to call the resizeCanvas function when the browser window is resized. All the

functionality you had previously to set the width and height of the canvas element has been moved into that function,

including the drawing of the rectangle the size of the canvas (remember: changing the width and height will reset the

canvas, so everything has to be redrawn). The final addition is a call to the resizeCanvasfunction to kick things off when

the page is loaded for the first time.

If you try that now you'll notice the canvas element resizes beautifully and no scrollbars appear. It works, well done!

Resumen We've covered all sorts of interesting stuff in this chapter, particularly if you've never used canvas before. You've learned

how to use the canvas element, how to draw basic shapes and paths, and how to change the color of those shapes and paths.

You've also learned how to draw text, erase the canvas, and how to make canvas fill the browser window. It's a huge

amount really, so I think you should pat yourself on the back and go make yourself another cup of tea to let things soak in.