Dibujando Bob Esponja Con HTML 5 Y Canvas

por | 23 julio, 2014

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 pensamientos en “Dibujando Bob Esponja Con HTML 5 Y Canvas

  1. Pingback: Bitacoras.com

Los comentarios están cerrados.