Date post: | 15-Dec-2014 |
Category: |
Documents |
Upload: | juma-sanchez |
View: | 52 times |
Download: | 0 times |
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.