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:
También te voy a mostrar cómo personalizar el color de relleno y color de borde en cada una de las figuras.
La función rect
toma los siguientes argumentos:
O explicado de otra forma:
contexto.rect(x, y, anchura, altura)
Por lo tanto podemos dibujar un cuadrado y un rectángulo con esta función.
El grosor del borde se establece con lineWidth, el color de relleno con fillStyle y el color del borde con strokeStyle.
Recuerda que el color puede ser definido a través de su nombre o con un valor hexadecimal, entre otros.
Nota: en los ejemplos de código pongo comentarios para explicarlo de mejor manera.
Para dibujar un cuadrado sobre un canvas en JavaScript pasamos el mismo valor para la anchura y altura de rect
.
Mira el resultado en este enlace.
Para dibujar un rectángulo igualmente usamos la función rect
.
Veamos el ejemplo que dibuja un rectángulo sobre un canvas o lienzo de JavaScript:
Este rectángulo mide 50 x 100, si quieres que sea uno horizontal simplemente invierte las medidas.
Puedes probarlo aquí.
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…
En este artículo se presenta una guía para imprimir un PDF a partir de una…
Esta web usa cookies.