HTML

JavaScript: Dibujar elipse y media elipse sobre Canvas

Hemos estado haciendo varios trazos y figuras geométricas con Canvas y JavaScript. Hicimos líneas, dibujamos texto, triángulos, cuadrados, círculos y otras figuras variadas.

Hoy vamos a terminar esta serie de tutoriales viendo cómo dibujar una elipse en JavaScript a través de la función ellipse.

También vamos a ver cómo dibujar media elipse y cómo rotar a la misma.

Leer más »JavaScript: Dibujar elipse y media elipse sobre Canvas

Dibujar figuras geométricas en Canvas con JavaScript

En este post recopilo algunos ejemplos de figuras geométricas dibujadas sobre un lienzo o canvas (elemento de HTML5) usando el lenguaje de programación JavaScript.

Las figuras que veremos son:

  1. Rombo
  2. Romboide
  3. Trapecio
  4. Trapezoide
  5. Pentágono
  6. Hexágono
  7. Heptágono

Nota: recuerda que ya vimos cómo dibujar triángulos, y también cómo dibujar rectángulos o cuadrados.

Para dibujar las figuras vamos a unir unas simples líneas con lineTo.

Leer más »Dibujar figuras geométricas en Canvas con JavaScript

Dibujar curvas en Canvas usando JavaScript

El elemento canvas de JavaScript tiene un gran soporte para dibujar formas. Por ejemplo, podemos dibujar líneas o curvas cuadráticas.

En este post te voy a mostrar cómo dibujar curvas de Bézier en JavaScript (o bueno, sobre un canvas) a través del método bezierCurveTo.

Nota: este tipo de curva tiene dos puntos de apoyo, si quieres una curva más simple utiliza el método quadraticCurveTo.

Leer más »Dibujar curvas en Canvas usando JavaScript

Curva cuadrática de Bézier – Canvas en JavaScript

En este post te voy a mostrar un ejemplo de cómo dibujar o trazar una curva cuadrática de Bézier en un canvas de HTML5 usando JavaScript a través del método quadraticCurveTo.

Recuerda que una curva de Bézier tiene un inicio, un final y un punto de apoyo que define cómo será la curvatura.

Más adelante veremos el método que utiliza dos puntos de apoyo, igualmente con la curva de Bézier.

Leer más »Curva cuadrática de Bézier – Canvas en JavaScript

Screenshot de página web con PHP y JavaScript

Tomar screenshot de página web y enviarla a PHP usando html2canvas

Las capturas de pantalla de las aplicaciones web (o sitios web) son una forma bastante buena de arreglar errores de nuestros programas reportados por usuarios, ya que gracias a ellas podemos ver qué error aparece o cuál es el problema que reportan (sobre todo de diseño).

Screenshot de página web con PHP y JavaScript

Screenshot de página web con PHP y JavaScript

En el mundo de JavaScript existe la librería html2canvas cuyo uso ya vimos anteriormente, de hecho esto podría ser la continuación del mismo, en donde veremos cómo enviar una captura de pantalla a un servidor con PHP.

Aunque el ejemplo muestra cómo recibir la captura de la webapp con PHP, podemos adaptar el código para otros lenguajes del servidor.

Leer más »Tomar screenshot de página web y enviarla a PHP usando html2canvas

Convertir HTML a imagen con html2canvas – Tomar screenshot de página web

En este post voy a explicar y a dar algunos ejemplos para convertir el contenido de una página web a una imagen, es decir, tomarle una “captura de pantalla” a la página web usando únicamente JavaScript del lado del cliente y la maravillosa librería de html2canvas.

Voy a mostrar cómo adjuntar el elemento canvas al documento, descargar la imagen, ignorar algunos elementos al tomar la captura de pantalla, respetar los estilos CSS y poner el resultado sobre un canvas existente.

HTML convertido a imagen con html2canvas

HTML convertido a imagen con html2canvas

La imagen anterior fue generada por esta librería, respetando estilos de la tabla, imágenes, colores, fuentes y más.

Leer más »Convertir HTML a imagen con html2canvas – Tomar screenshot de página web

Convertir canvas a imagen PNG para descargarla

Los elementos canvas son algo muy útil en HTML, son un lienzo en donde se pueden dibujar varias cosas.

Al generar un contenido en un canvas el mismo puede ser descargado por el usuario, ¿pero qué pasa si queremos agregar más funcionalidad y agregar un botón para descargar el elemento como imagen?

Precisamente eso veremos hoy: cómo convertir el contenido de un canvas a una imagen PNG y hacer que la misma se descargue, usando JavaScript.

Leer más »Convertir canvas a imagen PNG para descargarla

jQuery y select - Manipular elemento HTML

Select y jQuery: obtener seleccionado, agregar opción, limpiar y escuchar cambios

jQuery sigue siendo una librería usada en estos últimos tiempos. Me atrevo a decir que es el framework más usado en el entorno de JavaScript, aunque claro, existen mejores por mucho, pero no vamos a discutir eso hoy.

La librería de jQuery y su forma de seleccionar los elementos permite interactuar con los mismos de una manera muy fácil, pero debemos aprender los métodos.

jQuery y select - Manipular elemento HTML

jQuery y select – Manipular elemento HTML

Por eso es que en este post veremos cómo trabajar con el elemento select de HTML desde jQuery. Veremos cómo:

  • Obtener elemento seleccionado del select (la opción)
  • Agregar una opción al select
  • Limpiar el select, es decir, remover todas las opciones
  • Escuchar cuando el usuario seleccione otra opción del select.

Todo esto con jQuery, si quieres ver cómo se hace con JavaScript puro mira este post.

Nota: si quieres ver la demostración de lo que haremos aquí puedes entrar a este enlace.

Leer más »Select y jQuery: obtener seleccionado, agregar opción, limpiar y escuchar cambios

Manipular select con JavaScript puro

Select y JavaScript: agregar, limpiar, obtener y escuchar cambios del elemento HTML

Un select es una lista desplegable de opciones de HTML, se declara usando <select> y dentro de él tiene opciones declaradas con <option>. Cada opción tiene un valor y un texto.

El select de HTML se maneja a través de JavaScript. Al select también se le conoce como lista desplegable, Dropdown list o simplemente select.

Manipular select con JavaScript puro

Manipular select con JavaScript puro

Hoy veremos cómo trabajar con JavaScript y los elementos de tipo select con option. Vamos a ver cómo:

  1. Obtener valor seleccionado de un select
  2. Agregar opciones al elemento select
  3. Obtener opción seleccionada
  4. Limpiar el select
  5. Escuchar cuando el valor del select cambia, es decir, que se selecciona otro valor

Está de más mencionar que esto lo haremos con JavaScript puro, sin usar frameworks ni librerías externas.

Al final tendremos un ejemplo en donde manejamos un select con JavaScript, el cual se puede probar en este enlace.

Leer más »Select y JavaScript: agregar, limpiar, obtener y escuchar cambios del elemento HTML