domingo, 31 de julio de 2016

Crear un Paint en Javascript Canvas


Para ver en youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides suscribirte)


  En el video que acabas de ver aprenderás como hacer un paint en Javascript usando un elemento Canvas para dibujar, descubrirás que es muy sencillo el código es un poco largo pero no tiene complicaciones



¿Que imagenes puedo usar para mis cursores?

  Actualmente Chrome, Firefox y Safari soportan cualquier archivo de imagen soportado por el navegador mismo excepto el formato .ANI 
  Internet Expolorer solo soporta formatos .CUR y .ANI a continuación te dejo el enlace a una página para convertir cualquier imagen a formato .CUR : convertir a .cur online

  Con respecto al tamaño, lo ideal es utilizar imagenes de 32x32 actualmente cualquier tamaño es soportado, el tamaño comentado anteriormente es solo una recomendación.

  Si usas una imagen gif animada como cursor la animación no será reproducida

  Puedes usar cursores con transaparencias pero estos solo se veran en Sistemas operativos superiores a XP ya que esta es una limitación del S.O

Código Fuente

  A continuación el código fuente completo del videotutorial, sigue el enlace para descargarlo

Plantilla HTML

  Si solo quieres practicar tu Javascript y no quieres perder tiempo escribiendo la parte CSS y HTML puedes descargar este documento HTML que contiene lo mismo de arriba excepto la parte Javascript :  Haz clic aquí para descargar la plantilla HTML

Imágenes

  A continuación un archivo de Winrar que contiene 4 imágenes dos del lapiz y del borrador, una para usar como cursor y la otra para usar como botón :

10 comentarios:

  1. buenos dias amigo como puedo hacer una linea de conexión con Javascript Canvas, por ejemplo un diagrama de clases y hacer una linea de 1:1 para conectar 2 tablas.
    espero que por favor me ayudes un poco gracias

    ResponderEliminar
    Respuestas
    1. Hola, gracias por tu comentario. Eso lo haces con las funciones: moveTo() y lineTo() en esta página puedes ver un ejemplo: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_lineto

      Eliminar
  2. hola amigo como estas?? como hago para insertar una imagen dentro de ese mismo codigo???

    ResponderEliminar
    Respuestas
    1. Usando la función drawimage() mas info aquí: https://www.w3schools.com/tags/canvas_drawimage.asp

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. La solución la encontré al agregar la imagen al canvas desde CSS:

      canvas {
      border : none;
      cursor : url('lapizcursor.gif'), default;
      background-image: url('img/Berlin.jpg');

      /*Esta última linea agrega la imagen, solo hay que modificar el width y height en la etiqueta canvas en HTML de acuerdo al tamaño de la img*/
      }

      Eliminar
  3. Hola; como estas?
    sabes como hacer para que la linea no se vea como mucho puntos y que sea una linea continua?

    ResponderEliminar
  4. disculpa quiero probar, el codigo, pero no se direcciona libremente

    ResponderEliminar
  5. hola, que buen tutorial. Estoy iniciando en js y quiero aplicarlo a dispositivos móviles para que se pueda dibujar touch ¿Sabes si es muy complicado adaptar los eventos de toque a esto ?

    ResponderEliminar