En este post te voy a enseñar cómo usar la función rect del contexto de un canvas en JavaScript para dibujar dos figuras geométricas: Un cuadrado Un rectángulo También te voy a mostrar cómo personalizar el color de relleno y color de borde en cada una de las figuras. ...
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: Rombo Romboide Trapecio Trapezoide Pentágono Hexágono 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. ...
En este post te mostraré cómo hacer una petición JSON usando JavaScript y PHP como lenguaje de servidor. Recuerda que ya hablamos sobre la definición de JSONP en otro post. Nota: aquí está la demostración, y aquí el repositorio de GitHub. ...
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. ...
Siguiendo con los tutoriales sobre el elemento canvas de HTML5 en este post vamos a ver cómo escribir texto sobre el canvas, o mejor dicho, dibujar texto sobre el canvas. Vamos a personalizar la fuente y el color, así como las coordenadas en donde el texto comienza. Los métodos que veremos son strokeText y fillText. ...
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. ...
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. ...
En este post te voy a enseñar a dibujar líneas (de diferente color) en un elemento canvas de HTML usando los métodos moveTo y lineTo, además de cambiar el grosor de las mismas. Todo esto lo haremos con JavaScript y el elemento canvas de HTML. ...
Hoy vamos a ver cómo dibujar un triángulo en un canvas de HTML5 a través de JavaScript usando los métodos moveTo, lineTo y closePath. Aunque no hay un método llamado triangle o algo por el estilo, podemos dibujar cualquier tipo de triángulo uniendo algunas líneas. ...
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). 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. ...