Dibujando Bob Esponja Con HTML 5 Y Canvas

Hola 

Hace día vi un vídeo de cómo dibujar a Bob Esponja con CSS3 pero sin usar Canvas. El vídeo está muy bien explicado y esta realizado por Falcon Masters, canal de YouTube que sigo ya hace tiempo. El vídeo es éste:

embedded by Embedded Video

YouTube Direkt

Podéis consultar  todo el código en el siguiente artículo de su blog:

El caso es que pensé que estaría bien hacerlo pero utilizando Canvas y JavaScript, ya que así me evitaba estar pensando con los distintos tipos de position, display y z-index; los cuales son un verdadero engorro. También pensé que era  una forma amena de aprender a utilizar Canvas, y acerté. Con esto he aprendido a diferenciar cómo utilizar curvas Bezier. En concreto, la función quadraticCurveTo es un caso particular para dibujar parábolas usando Bezier, y que he utilizado para dibujar la boca. Para dibujar la boca con ésta función hay que colocar el punto de  control  como el punto medio entre el punto de partida y el de parada.

El código lo he subido a Code Pen:

Ya ya, no tiene brazos y piernas , se las iré poniendo poco a poco y actualizando el código en Code Pen

Saludos

2 Responses to“Dibujando Bob Esponja Con HTML 5 Y Canvas”

  1. 23 julio, 2014 at 16:30 #

    Genial! Muchas gracias por compartir mi articulo.

Pingbacks/Trackbacks

  1. Bitacoras.com - 23 julio, 2014

    Información Bitacoras.com

    Valora en Bitacoras.com: Hola  Hace día vi un vídeo de cómo dibujar a Bob Esponja con CSS3 pero sin usar Canvas. El vídeo está muy bien explicado y esta realizado por Falcon Masters, canal de YouTube que sigo ya hace tiempo. El vídeo es éste:…

Comments are closed.

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com