Aprender Los Conceptos Básicos de HTML5 Canvas

Aprender los conceptos bsicos de HTML5 Canvas
Por Hawkes robar en 11 de julio 2011
El conocimiento necesario: Basic JavaScript y HTML Se requiere: jQuery Duracin del proyecto: 1-2 horas
DESCARGAR ARCHIVOS DE CDIGO FUENTE
En el captulo 3 de su libro, la Fundacin HTML5 Canvas, Rob Hawkes explica cmo utilizar el elemento de tela, dibujar formas bsicas y de texto, cambiar el color, borrar el lienzo y la forma para que se llene la ventana del navegador Este extracto es el captulo 3 de la Fundacin 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 fantstica de HTML5. En este artculo vamos a echar un vistazo adecuada a las caractersticas de la tela, de aprender a realmente entrar en un documento HTML para dibujar formas y otros tipos de objetos sobre ella. Tambin 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 cmo hacer tela del mismo tamao 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 an ms entusiasmados con lienzo HTML5 y las posibilidades que se abre delante de usted. ANUNCIO
Obtencin de amistad con el elemento canvas

Al igual que video y audio, el elemento canvas utiliza absolutamente ningn plug-ins externos o el vud para hacer su cosa. Todo lo que necesitas es algo de HTML y un poco de cortesa de la API de JavaScript prestacin 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 cdigo es todo lo que necesita para empezar con l:

1. 2. 3. <canvas width = altura "500" => "500" <- Insertar contenido de reserva aqu -> </ Canvas>
VIEW SOURCE COPY CODE VIEW SOURCE COPY CODE
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 representacin 2D. Vamos a llegar a dibujar cosas en el lienzo en breve, que es simple tambin. 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 tamao del elemento de tela, que a su vez definen el tamao de la contexto de representacin 2d. Sin la definicin de un tamao como esta el elemento de tela y el contexto de renderizado 2D se establecera en la anchura y altura por defecto de 300 por 150, respectivamente. Ms adelante en este captulo vamos a ver las maneras de crear un elemento de tela que cambia de tamao de forma dinmica y llena toda la ventana del navegador. Nota: La posicin del elemento Canvas se define por su ubicacin dentro de su documento HTML. Se puede mover con CSS como se requiere, al igual que otros elementos HTML.
Compatibilidad con navegadores para tela

Mayora de los navegadores actuales son compatibles con el elemento de tela y la mayora de sus caractersticas, pero no es ninguna sorpresa que Internet Explorer no lo hace, al menos no en cualquier versin 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 opcin es utilizar el script de ExplorerCanvas fantstica, que ha sido desarrollado por algunos cerebritos de Google. La belleza de este mtodo es que slo se necesita incluir un script en su pgina web y el elemento de tela funcionan en navegadores de Internet Explorer anteriores a la versin 9. Si esto es algo que le interesa a continuacin, usted debe descargar el script desde lapgina web ExplorerCanvas y siga las instrucciones para su instalacin.
El contexto de representacin 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 propsito del elemento canvas es actuar como un contenedor del contexto de representacin 2D, que le proporciona todos los mtodos 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 representacin 2D a travs 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 representacin 2D es un estndar 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. Movindose a la derecha se incrementar el valor de x, y movindose hacia abajo, aumentar el valor de y. La comprensin de cmo funciona el sistema de coordenadas es integral, si usted quiere tener las cosas dibujar en el lugar correcto.
Representacin 2D del sistema de coordenadas cartesianas contexto
Una sola unidad en el sistema de coordenadas es por lo general equivale a un pxel en la pantalla, por lo que la posicin (24, 30) sera de 24 pxeles derecha y 30 pxeles hacia abajo.Hay algunas ocasiones en las que una unidad en el sistema de coordenadas puede igualar 2 pxeles, al igual que con pantallas de alta definicin, 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 ponindome y quitndome punto en torno al tratar de explicar todo esto en palabras cuando pudiramos empezar a usarlo. As que vamos a hacer justamente eso mediante la creacin de una pgina bsica web HTML con un elemento de lienzo en blanco:

1. 2. 3. 4. 5. 6. 7. <! DOCTYPE html> < < < < html > cabeza > ttulo > Aprender los fundamentos de la tela </ title > meta charset = "UTF-8">
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. 19. 20. 21. 22. 23. < cuerpo > <canvas id = ancho de "myCanvas" = altura "500" => "500" <- Insertar contenido de reserva aqu -> </ Canvas> </ cuerpo > </ html >
Usted no ver nada si se ejecuta tal como est, as que vamos a tener acceso al contexto de representacin 2D para que podamos empezar a dibujar cosas. Coloque el siguiente dentro de la declaracin de jQuery, al igual que hicimos con los anteriores ejemplos de JavaScript:

VIEW SOURCE COPY CODE VIEW SOURCE

1. 2. var lienzo = $ ("# MiCanvas"); var context = lienzo de conseguir (0) getContext ("2D")..;
COPY CODE
Todo lo que estamos haciendo aqu es asignar el elemento de tela a una variable a continuacin, asignar el contexto de representacin 2D a otra variable llamando al mtodogetContext. Debo sealar que, debido a que estamos usando jQuery, es necesario llamar al mtodo get para que acceder al DOM para el elemento de tela, de all que a continuacin, tener acceso al mtodo de lona getContext. Yo no me preocupara demasiado por tratar de entender por qu: slo ser conscientes de que el mtodo get no tiene nada que ver con el lienzo en s. Ahora tenemos una variable que contiene el contexto de representacin 2D, podemos empezar a dibujar algo. Son tiempos excitantes! Agregue la lnea siguiente despus de declarar la variable de contexto:

1. . contexto fillRect (40, 40, 100, 100);
Si actualizas la pgina vers algo increble 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 ms adelante en este captulo.
Dibujo de formas bsicas y lneas de

Como puede ver, dibujar un cuadrado es bastante sencillo, es slo una lnea de cdigo, el mtodo fillRect:

1.
. contexto fillRect (40, 40, 100, 100);
Lo obvio que notar es que el mtodo se llama fillRect y no fillSquare. Estoy seguro que la mayora de ustedes ya saben que un cuadrado es en realidad un rectngulo con lados de la misma longitud, pero para aquellos que no lo hacen, una plaza es en realidad un rectngulo con lados de la misma longitud! Hay cuatro argumentos necesarios para crear un rectngulo. 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 rectngulo. La anchura de un rectngulo se dibuja a la derecha de la posicin (x, y), y la altura del rectngulo se dibuja hacia abajo desde la posicin (x, y). Usted puede ver por qu es importante saber cmo funciona el sistema de coordenadas, de lo contrario puede haber asumido la altura atraera hacia arriba desde la posicin (x, y). El mtodo fillRect podra reescribirse como esto para visualizar los argumentos:

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 pgina. Qu sorpresa, es un rectngulo. Y para dibujar el rectngulo en una posicin diferente? S, basta con cambiar las coordenadas (x, y) los valores de posicin. Por ejemplo, una posicin x de 200 y ay posicin de 300.
Dibujar un rectngulo en una posicin diferente
Esta es la belleza de la tela, es ridculamente fcil 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 ms all de las dimensiones del elemento canvas, que no aparecer en la pantalla. Slo 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 mtodo strokeRect, el gemelo malvado. Considerando que el fillRectdibuja un rectngulo y lo rellena con un color (en nuestro caso negro), el mtodostrokeRect dibuja un rectngulo y la acaricia. Eso no quiere decir que strokeRect le da una palmadita suave con la mano (que no sera un gemelo malvado, si era tan bonita), sino que significa que el contorno del rectngulo tiene una lnea trazada a su alrededor. Si cambia el ejemplo fillRect utilizar strokeRect vez vers a qu me refiero.
Dibujar un rectngulo acarici
El rectngulo tiene ahora un esbozo, es efectivamente hueco. Ahora bien, esto es divertido y todo, pero qu hay que intentar algo un poco ms aventureros, como una lnea en toda regla? Por qu no.
Lneas
Las lneas 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 mtodoBeginPath en el contexto de renderizado en 2D, lo que efectivamente dice: "preprate, que vamos a empezar a dibujar un camino." El siguiente mtodo para llamar es moveTo, que establece el (x, y) al origen del camino que est a punto de dibujar. Despus de esto es un llamado a lineTo con la (x, y) del destino de nuestra lnea, con una llamada a closepathpara terminar de dibujar el camino. Por ltimo, una llamada a un accidente cerebrovascular se hacen de la lnea visibles al dibujar su contorno. Al poner todo esto junto vienes con algo como esto:

1. 2. . contexto BeginPath (); / / Inicia el camino . contexto moveTo (40, 40); / / Establecer el origen de ruta
3. 4. 5.
. contexto lineTo (340, 40); / / Establecer la ruta de destino . contexto closepath (); / / Cerrar el camino . contexto de accidente cerebrovascular (); / / Esquema de la ruta
Qu debera tener este aspecto, una lnea recta agradable y aburrido:
Las lneas no tienen por qu ser horizontal o vertical, sin embargo, al cambiar los argumentos (x, y) del mtodo lineTo puedes hacerlo en diagonal:

1. . contexto lineTo (340, 340);
Las lneas rectas no son poderosos por s alentadores, pero se pueden combinar para producir formas complejas que son emocionantes. Voy a ir a travs de las caractersticas avanzadas de rutas en el prximo captulo. Por ahora, vamos a intentar algo ms. Qu hay de los crculos de giro? Son sin duda un poco ms emocionante.
Crculos
No hace falta ser un genio para darse cuenta de los crculos son muy diferentes a los rectngulos. Sin embargo, sabiendo que esto en cierto modo a explicar por qu la creacin de un crculo en el lienzo es muy diferente a la creacin de un rectngulo. Un crculo es una forma bastante compleja, y debido a esto no es en realidad un mtodo especial en lienzo para crear un crculo. Lo que hay es un mtodo para arcos de dibujo, que es todo un crculo realmente es: un arco se uni en ambos extremos. Es un poco confuso, as que qu hay que saltar y crear un crculo en el lienzo:

1. 2. 3. 4.
. . . .
contexto contexto contexto contexto
BeginPath (); / / Inicia el camino de arco (230, 90, 50, 0, Matemticas PI * 2, falsa.); / / Dibujar un crculo closepath (); / / Cerrar el camino fill (); / / Llenar el camino
Usted ya debe reconocer a las primeras y ltimas dos lneas, que acaba de iniciar y cerrar el camino (el arco) y luego la rellenan cuando hayamos terminado (el mtodo de relleno es compaero de carrera). La parte jugosa es la segunda lnea, que hace todo lo necesario para dibujar un crculo. Puede parecer un poco complicado, as que vamos a dividirla para usted. Hay seis argumentos utilizados en la creacin de un arco, el (x, y) valores de coordenadas para el origen del arco (el centro del crculo, 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 mtodo de arco puede ser reescrito de una manera ms fcil de leer as:

1. . contexto de arco (x, y, radio, startAngle, endAngle, hacia la izquierda);
Los tres primeros argumentos son fciles de entender as que voy a saltar ms all de los. El ngulo de inicio y los argumentos finales de ngulo son aparentemente simple, pero que merecen algunas explicaciones para entender adecuadamente cmo 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 estn en radianes y grados no y, sin entrar en demasiados detalles, es seguro asumir que 360 grados (un crculo completo) es 2 (pi multiplicado por 2) radianes. La gente mucho ms inteligente que yo he trabajado la manera de convertir de grados a radianes y han llegado con la siguiente frmula (escrito en JavaScript para nuestros propsitos):

1. 2. grados var = 1 / / 1 grado 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 ms fciles que usted puede utilizar la imagen de abajo como una gua rpida para el ngulo a lo largo de un crculo en radianes.
Conversin entre grados y radianes
Para algo ms complicado que puedes usar la frmula descrita anteriormente. As que ya saben cmo trabajar en ngulos de lienzo. Vamos a poner el foco de nuevo al ejemplo del crculo. 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 crculo. Si no me cree, a continuacin, echa un vistazo a la imagen de arriba. Nota: Para obtener acceso al valor de pi en JavaScript se utiliza el objeto de Matemticas,que es un objeto especial que le permite hacer todo tipo de fra matemtica basada en esas cosas. Vamos a utilizar en el futuro para tareas como la generacin de nmeros aleatorios. Si ejecuta el ejemplo que usted debe conseguir una visualizacin en el navegador de esta manera:
Un crculo, Hurra! Ahora, cul sera el ngulo final que si usted quiere dibujar la mitad de un crculo en su lugar? Compruebe la imagen de arriba si lo desea. Eso es correcto, sera simple y llanamente , que se parece a esto en JavaScript:

1. . contexto de arco (230, 90, 50, 0, matemticas PI, falso.); / / Dibujar un crculo semiVIEW SOURCE COPY CODE VIEW SOURCE COPY CODE
Si todo ha ido bien debera tener un hermoso semicrculo en su navegador. Aunque el sexto argumento en el mtodo 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 explcitamente una direccin para sacar el arco. Se puede jugar con los ngulos de todos los das para crear cuartos de crculo, 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 ms 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 lneas. Espera, que hay? Y es muy fcil? Al igual que una lnea de cdigo fcil? Impresionante! No estoy mintiendo acerca de que sea fcil el camino. Vamos a saltar directamente y cambiar el color de la plaza se hizo al principio del captulo.

VIEW SOURCE COPY CODE

1. 2. contexto fillStyle = "rgb (255, 0, 0)".; . contexto fillRect (40, 40, 100, 100);
Al establecer la propiedad FillStyle del contexto de representacin 2d usted es capaz de cambiar el color que las formas y los caminos estn llenos como. En el ejemplo anterior, una RGB (rojo, verde y azul) se le asigna un valor de color, aunque tambin se podra utilizar cualquier valor vlido CSS color, como un cdigo 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 fcil, pero no te emociones demasiado, ya que hay un lado negativo. La cuestin es que el establecimiento de la propiedad FillStyle significa que todo se dibuja despus 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 slo quera 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:

1. 2. 3. 4. 5. 6. contexto fillStyle = "rgb (255, 0, 0)".; . contexto fillRect (40, 40, 100, 100); / / Plaza Roja . contexto fillRect (180, 40, 100, 100); / / Plaza Roja contexto fillStyle = "rgb (0, 0, 0)".; . contexto fillRect (320, 40, 100, 100); / / Negro cuadrados
Qu tendr este aspecto en el navegador:
Tambin 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:

1. 2. 3. 4. 5. 6. contexto strokeStyle = "rgb (255, 0, 0)".; . contexto strokeRect (40, 40, 100, 100); / / Plaza Roja . contexto strokeRect (180, 40, 100, 100); / / Plaza Roja contexto strokeStyle = "rgb (0, 0, 0)".; . contexto strokeRect (320, 40, 100, 100); / / Negro cuadrados
Nota: No hay nada que nos impida la combinacin 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 bsicas. Es tan fcil como cambiar el color de las lneas, as:

1. 2. 3. 4. 5. 6. 7. contexto strokeStyle = "rgb (255, 0, 0)".; . contexto BeginPath (); . contexto moveTo (40, 180); . contexto lineTo (420, 180); lnea / / Rojo . contexto closepath (); contexto de accidente cerebrovascular ().;
8. contexto strokeStyle = "rgb (0, 0, 0)".; 9. . contexto BeginPath (); 10. . contexto moveTo (40, 220);
11. . contexto lineTo (420, 220); lnea / / 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 lnea

Cambiar el color es muy divertido, pero los ejemplos de la lnea han sido un poco en la parte delgada. Afortunadamente en el lienzo, no es un mtodo de engorde un poco, y que es propiedad de la anchura de lnea el contexto de representacin 2D. Por defecto, la propiedad de anchura de lnea se establece en 1, pero usted puede configurarlo para que todo lo que quieras. Por ejemplo, vamos a cambiar el ancho de las lneas de color rojo y negro:

1. 2. 3. 4. 5. 6. 7. 8. 9. . contexto de anchura de lnea = 5; / / Hacer que las lneas gruesas contexto strokeStyle = "rgb (255, 0, 0)".; . contexto BeginPath (); . contexto moveTo (40, 180); . contexto lineTo (420, 180); lnea / / Rojo . contexto closepath (); contexto de accidente cerebrovascular ().;
10. contexto de anchura de lnea = 20;. / / Hacer que las lneas an ms grueso 11. 12. 13. 14. 15. 16. 17. contexto strokeStyle = "rgb (0, 0, 0)".; . contexto BeginPath (); . contexto moveTo (40, 220); . contexto lineTo (420, 220); lnea / / Negro . contexto closepath (); contexto de accidente cerebrovascular ().;
El resultado de esto es una lnea un poco ms gruesa de color rojo y negro de una lnea demasiado gruesa:
Y anchura de lnea funciona igual de bien en las formas:


1. 2. 3. 4. 5. 6. 7. 8. . contexto de anchura de lnea = 5; / / Hacer que las lneas gruesas contexto strokeStyle = "rgb (255, 0, 0)".; . contexto strokeRect (40, 40, 100, 100); / / Plaza Roja . contexto strokeRect (180, 40, 100, 100); / / Plaza Roja contexto de anchura de lnea = 20;. / / Hacer que las lneas an ms grueso
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 ms gruesas con un cuadrado negro demasiado espeso. Usted ha prcticamente dominado los fundamentos ahora, pero todava hay un par de cosas que quedan por recorrer antes de pasar a las cosas realmente bien.
Dibujar texto
Canvas no es slo para grficos e imgenes, tambin se puede utilizar para mostrar texto.Aunque si voy a ser sincero, no hay muchas ocasiones en la elaboracin de texto usando Canvas es una mejor opcin en comparacin con la creacin de texto con un enfoque ms 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 ratn como un texto normal en un documento HTML no es en realidad el texto, slo 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 razn legtima 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 pxeles y grficos. Ahora que es la forma en que puede mostrar cmo dibujar texto en el lienzo, es muy fcil:

1. 2. var texto = "Hola, Mundo!"; . contexto fillText (texto, 40, 40);
Eso es todo lo que necesita para dibujar una cadena de texto. El mtodo fillText del contexto de representacin 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 fcil. Yo no le mostrar la salida por el momento, ya que va a ser demasiado pequea para ver, esto es debido a la configuracin de fuente por defecto para el texto en el lienzo son 10px sans-serif (absolutamente minscula). As que vamos a cambiar el tamao de ahora, y mientras estamos en ello puede ser que tambin le mostrar cmo cambiar la fuente. Para hacer esto usted necesita para establecer la propiedad de la fuente del contexto de representacin 2D, de este modo:

1. 2. 3. var texto = "Hola, Mundo!"; . contexto font = "30px serif"; / / Cambiar el tamao y la fuente . 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 tamao en pxeles 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 podra incluso hacer que el texto en cursiva, si realmente quera al hacer esto:

1. 2. 3. var texto = "Hola, Mundo!"; . contexto font = "30px cursiva serif"; . contexto fillText (texto, 40, 40);
Todo lo que ha cambiado aqu es la palabra en cursiva ha sido aadido a la cadena de fuente. Como la propiedad de la fuente se que hay muchas opciones ms que puedes utilizar, como la altura de la lnea, 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 fciles de entender.La razn de esto es que la representacin 2d contexto API utiliza mtodos y propiedades que se denominan de una manera que hace que sean fciles de entender. Ahora debe tener sentido por la que destac la importancia de nombrar las variables adecuadamente en el captulo 2. Antes de continuar, djame que te ensee cmo crear este texto acarici es til saber lo siguiente:

1. 2. var texto = "Hola, Mundo!"; . contexto font = "60px cursiva serif";
3.
. contexto strokeText (texto, 40, 100);
Esta vez usted est utilizando el mtodo strokeText, que tiene exactamente los mismos parmetros que fillText. Se parece un poco raro en un tamao de fuente pequeo por lo que en este ejemplo, el tamao es ms 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 increble que simplemente no estara 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 ms? Afortunadamente, hay dos opciones a su disposicin: el mtodo clearRect, o el truco anchura / altura. Echemos un vistazo al mtodoclearRect del contexto de renderizado 2D en primer lugar. Digamos que has dibujado un cuadrado y un crculo en el lienzo:

1. 2. 3. 4. 5. 6. . contexto fillRect (40, 40, 100, 100); . . . . contexto contexto contexto contexto BeginPath (); de arco (230, 90, 50, 0, Matemticas PI * 2, falsa.); closepath (); fill ();
Y ahora que ha decidido, por alguna razn, 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 pxeles de ancho y 500 pxeles de la llamada aclearRect se vera as:

VIEW SOURCE COPY CODE VIEW SOURCE

1. . contexto clearRect (0, 0, 500, 500);
COPY CODE
Lo cual, cuando es ejecutado, se mostrar nada en el navegador, ya que acaba de limpiar todo el lienzo limpio. Tambin se puede incluso llamar clearRect cuando no se conoce el tamao del lienzo mediante el uso de la anchura de jQuery y mtodos de altura, as:

1. . contexto clearRect (0, 0, ancho de tela (), lienzo de la altura ()..);
Cul sera el siguiente en su totalidad:

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. var lienzo = $ ("# MiCanvas"); var context = lienzo de conseguir (0) getContext ("2D")..; . contexto fillRect (40, 40, 100, 100); . . . . contexto contexto contexto contexto BeginPath (); de arco (230, 90, 50, 0, Matemticas PI * 2, falsa.); closepath (); fill ();
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 mtodo 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 fcilmente borrar un rea particular de la misma. Por ejemplo, si queremos eliminar slo la plaza en el ejemplo a continuacin, que podra llamarse clearRect as:

1. . contexto clearRect (40, 40, 100, 100);
Qu te deja con un crculo solitario. La forma en que esto funciona es que los argumentos en clearRect se puede cambiar para un rea muy especfica 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 slo una zona especfica alrededor de la plaza se fija para ser limpiado. Se podra fcilmente eliminar el crculo en lugar cambiando los argumentos de clearRect a lo siguiente:

1. contexto clearRect (180, 40, 100, 100).;
Lo cual, si nuestros clculos son correctos, debera dejarnos con slo una plaza. Recuerde que el origen de un arco es su centro, as que para obtener el origen correcto para el mtodo 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 slo una parte de un objeto en el lienzo:

1. 2. 3. 4. 5. 6. 7. 8. . contexto fillRect (40, 40, 100, 100); . . . . contexto contexto contexto contexto BeginPath (); de arco (230, 90, 50, 0, Matemticas PI * 2, falsa.); closepath (); fill ();
. contexto clearRect (230, 90, 50, 50);
En este ejemplo se debe tomar una gran porcin de su crculo:
Esta tcnica se utiliza a veces para dibujar formas complejas de forma rpida y sencilla mediante la elaboracin de una forma bsica y cortar pedazos fuera de ella.
El truco anchura / altura

Si slo 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 ms bien un mtodo 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 mtodo tiene algunas desventajas, por lo que te voy a dar un ejemplo:

1. 2. 3. 4. contexto fillStyle = "rgb (255, 0, 0)".; . contexto fillRect (40, 40, 100, 100);
5. 6. 7. 8.
. . . .
contexto contexto contexto contexto
BeginPath (); de arco (230, 90, 50, 0, Matemticas PI * 2, falsa.); closepath (); fill ();
Esto dibuja un cuadrado y un crculo rojo sobre el lienzo, sin embargo, nada loco. Ahora vamos a aadir en el restablecimiento del lienzo:

1. 2. . tela attr ("ancho", lienzo de ancho ().); . 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 mtodo attr en jQuery. Mi esperanza es que a estas alturas ya debe ser suficientemente cmoda 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 debera ver un lienzo en blanco. Ahora agregue la siguiente lnea despus de limpiar el lienzo con el truco de anchura / altura:

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 slo se debe usar este truco si usted est dispuesto a restablecer por completo el lienzo, no slo 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 pxeles, que es grande, pero lo que si queremos que se llene la ventana del navegador. Cmo 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 interpretacin de un 100% hasta 100 pxeles, 200% de 200 pxeles, y as sucesivamente. Un mtodo diferente es necesario. La forma ms sencilla de hacerlo es establecer la anchura y la altura del elemento canvas, precisamente, a la anchura y altura en pxeles 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:

1. 2. 3. 4. 5. 6. 7. var lienzo = $ ("# MiCanvas"); var context = lienzo de conseguir (0) getContext ("2D")..; tela attr ("ancho", $ (window) obtener (0) innerWidth..).; . tela attr (. "altura", $ (window) obtener (0) innerHeight.); 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:

1. 2. 3. * { margin : 0 ; padding : 0 ; } html , body { height : 100% ; width : 100% ; } 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:

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!

1. 2. 3. 4. 5. 6. 7. 8. 9. $ ( window ) . resize ( resizeCanvas ) ; function resizeCanvas ( ) { canvas. attr ( "width" , $ ( window ) . get ( 0 ) . innerWidth ) ; canvas. attr ( "height" , $ ( window ) . get ( 0 ) . innerHeight ) ; context. fillRect ( 0 , 0 , canvas. width ( ) , canvas. height ( ) ) ; }; 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.

Aprender Los Conceptos Básicos de HTML5 Canvas

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Aprender Los Conceptos Básicos de HTML5 Canvas

Cargado por

Copyright:

Formatos disponibles

Aprender los conceptos bsicos de HTML5 Canvas

Por Hawkes robar en 11 de julio 2011

Obtencin de amistad con el elemento canvas

Compatibilidad con navegadores para tela

Representacin 2D del sistema de coordenadas cartesianas contexto

Acceso al sistema de renderizado 2D

Si actualizas la pgina vers algo increble ha sucedido, un cuadrado negro ha aparecido!

Dibujo de un objeto con tela

Dibujo de formas bsicas y lneas de

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

Dibujar un rectngulo en una posicin diferente

Dibujar un rectngulo acarici

Qu debera tener este aspecto, una lnea recta agradable y aburrido:

contexto contexto contexto contexto

Conversin entre grados y radianes

VIEW SOURCE COPY CODE

Qu tendr este aspecto en el navegador:

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

Cambiar el ancho de lnea

Y anchura de lnea funciona igual de bien en las formas:

VIEW SOURCE COPY CODE

. contexto strokeText (texto, 40, 100);

Cul sera el siguiente en su totalidad:

VIEW SOURCE COPY CODE VIEW SOURCE COPY CODE

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

En este ejemplo se debe tomar una gran porcin de su crculo:

El truco anchura / altura

contexto contexto contexto contexto

Hacer de lona llena la ventana del navegador

También podría gustarte