Dibujo de HTML Canvas
- Página anterior Introducción a Canvas
- Página siguiente Coordenadas de Canvas
Dibujar en el lienzo utilizando JavaScript
Todos los dibujos en el lienzo HTML deben realizarse utilizando JavaScript:
Ejemplo
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Paso 1: Encontrar el elemento Canvas
Primero, debes encontrar el elemento <canvas>.
Esto se realiza utilizando el método DOM HTML getElementById():
const canvas = document.getElementById("myCanvas");
Paso 2: Crear el objeto de dibujo
Además, necesitas un objeto de dibujo de lienzo.
getContext() es un objeto HTML integrado que proporciona propiedades y métodos para el dibujo:
const ctx = canvas.getContext("2d");
Paso 3: Dibujar en el lienzo
Finalmente, puedes dibujar en el lienzo.
Establece el estilo de relleno del objeto de dibujo en rojo:
ctx.fillStyle = "#FF0000";
La propiedad fillStyle puede ser un color CSS, una gradiente o un patrón. El valor predeterminado de fillStyle es negro.
El método fillRect(x, y, width, height) dibuja un rectángulo en el lienzo, utilizando el estilo de relleno para rellenarlo:
ctx.fillRect(0, 0, 150, 75);
Vea también:
- Página anterior Introducción a Canvas
- Página siguiente Coordenadas de Canvas
