S
S


  



Uno de los grandes avances que hay al momento de programar en Html 5, es

poder utilizar la etiqueta canvas, con la cual podemos dibujar formas, renderizar
texto y manipulación de pixeles entre otras cosas, en este articulo vamos a dar
una pequeña introducción a canvas pero en el dibujo 2D, un tema que aun no
toma peso en la programación, así que empecemos.

Una de las cosas interesantes al momento de Ã





 

, es
que pareciera que realmente se trabajara con un lienzo de verdad, para que me
entiendan les pongo el siguiente ejemplo; si en un lienzo de verdad marcan una
linea roja y después pasan sobre ella una linea azul, ya no se podrá volver a la
linea roja, y esto es debido a que la
 

 no trabaja con capas, es
parecido a una imagen de mapa de bits.



  


Lo primero que vamos hacer es preparar nuestra plataforma de trabajo, y hay que
saber que navegadores son capaces de soportar cierta tecnología, en especial
utilizamos Google Chrome y no hemos tenido ninun problema con este navegador.

Por defecto el lienzo (

) tiene un tamaño de 300 x 150 pixeles y esta regla
aplica para todos los navegadores.

Para formar un lienzo en blanco vamos a utilizar el siguiente código.-

c


 
 
Ahora ya tenemos listo nuestro lienzo, ahora para dibujar hay que establecer el
contexto de dibujo con ayuda de javascript, de la siguiente forma.-

c

     

    !
" #
 $#% &
'
 
( 
Listo, con esto ya hemos logrado llamar a la acción el à Ã  ,
ahora ya se nos permitirá empezar a trabajar con la API.

c
[n el siguiente articulo vamos a mostrar como pintar nuestro lienzo de color azul y
pintar un semicirculo de color rosa, así que estén pendientes.


S
S






[n el primer post que publicamos sobre como dibujar en 2D con la etiqueta canvas
(programación en html5), les mostramos como preparar la plataforma para
empezar a utilizar este maravilloso elemento, les recomendamos darla una leída al
primer post para que puedan ir al corriente con nosotros, enseguida les dejamos el
link.-

u
 
 primera parte.

Ã




åealmente aprender a utilizar 

 es mas complicado que aprender a
 

 Ã, ya que básicamente 

 

 Ã mas
grande de todas, así que por lo pronto aprenderemos a dibujar algo simple, así
que empecemos.

Vamos a dibujar un rectángulo de color azul y un semicírculo de color rosa, lo

primero que haremos es utilizar el objeto context (el cual ya utilizamos
anteriormente al preparar el lienzo) para llamar al metodo fillåect() pasando por
argumentos las coordenadas X, Y, el ancho y el alto respectivamente, quedando el
ejemplo de la siguiente forma.-

c

     

    !
" #
 $#% &
' 
( )
c*!
*!+
**!
c**

Ý
 A # ,-c*!*!**!c** &
.
 
Así creamos un rectángulo como lo muestra la siguiente imagen.-

Como verán el color del rectángulo es de color negro, esto sucede por que no
definimos un color en concreto, así que por defecto lo muestra de color negro,
para cambiarlo a color azul haremos uso del metodo fillStyle() y esta debera ser
usada antes del metodo fillåect(), ejemplo.-

c

     

    !
" #
 $#% &
' 
( # ,/ &
A # ,-c*!*!**!c** &
.
 
Dando como resultado un rectángulo de color azul, como lo muestra la siguiente
imagen, como veras se utilizo el nombre del color en ingles, pero lo puedes usar
como lo utilizas en Css también.-

Ahora es tiempo de trazar el semicírculo de color rosa, primero pondremos el

código y después explicaremos, ejemplo.-

c


Œ
      

    !
" #
 $#% &
' 
( #
,/ &
A #
,-c*!*!**!c** &
. 
0 $, 
c* # 1/
2,**,,&
cc # 3 +
'&
c # $

 
c 
c" %4 5  
c' # '*!'*!*!*!6+ 78!, &
c( 
cA $ 
c. # 1 &
c0 
*
 
[ste es el resultado final.-

[n el script anterior se agregaron tres cosas nuevas.-

1.- Configurar el estilo de linea.

2.- Dibujo del semicírculo.

3.- Trazado de la ruta de la pintura (la linea).

Cuando se dibujan las rutas del camino, no aparece nada en el lienzo, en este
ejemplo dicha ruta fue un arco de 180 grados o un semicírculo, para ello hicimos

‰
uso del metodo arc() el cual recibe los siguientes argumentos, coordenada X,
coordenada Y, el radio, el angulo inicial y el angulo final.

[n el siguiente articulo explicaremos detalladamente estos pasos asi que no se lo

pierdan, saludos.

©