Añadir Tutorial a Favoritos | ¿Enlace roto? Enviar a revisar

Tutorial HTML5 - Dibujando sobre el canvas Bienvenidos a VerTutoriales.com, anteriormente, hemos visto una pequeña iniciación del elemento Canvas y hemos explicado como usarlo. En esta ocasión vamos a seguir con el curso de HTML5 avanzando un poco más sobre Canvas y vamos a dibujar sobre él, utilizando diferentes funciones. Así que vamos allá: 2. Dibujando sobre el Canvas Voy a explicar varias funciones que acompañarán al dibujado del canvas, estas funciones se han de utilizar una vez que se ha declarado el canvas y cargado en un contexto (si teneis alguna duda de como realizarlo podeis verlo en este primer tutorial). Pero antes, vamos a aclarar como se representan los valores dentro del elemento.

Evento Click en HTML5 (pintar con el raton) Bienvenidos a Vertutoriales.com, en esta ocasión volvemos a traer un ejemplo de como utilizar el evento Click para pintar en HTML5 un punto en rojo, veremos que no es muy complejo despues de los ejemplos anteriormente dados.

Curso-Tutorial HTML5 - Cargar una imagen en Canvas Bienvenidos a VerTutoriales.com, en esta ocasión vamos a seguir con el curso de HTML 5, y siguiendo con el canvas, vamos a mostrar el código para ver como podemos cargar una imagen en el canvas, en siguientes tutoriales veremos como tratar esa imagen, girarla, modificarla, etc... pero vamos poco a poco, para empezar, vamos a cargarla.

Pintar una imagen al hacer click con HTML5 Continuando con el proyecto del tilador, ya se puede ir poniendo un tile en la posición del mapa indicado! Solo tendreis que seguir con el código que pusimos anteriormente y modificar una función.

Tutorial HTML5 - Canvas pintar y rellenar formas irregulares Bienvenidos a VerTutoriales.com, en esta ocasión traemos como dibujar sobre el canvas sin forma específica (dibujar caminos), para ello utilizaremos varias funciones gráficas que soporta HTML5. 3. Pintar formas irregulares Para dibujar con estas funciones es muy sencilla, para empezar declaramos un nuevo camino con beginPath() y a continuación deberemos de situar el cursor donde queramos comenzar a pintar con moveTo(), una vez situado en el lugar que corresponda, solo nos quedaría ir tranzando lineas con lineTo(), una vez realizados todos los trazos, podremos utilizar fill() para rellenar la figura que pintaramos, siempre y cuando esta esté cerrada.