Blog
En este tutorial aprenderemos a dibujar cuadrados en canvas con Java Script. Como todos sabemos canvas es una etiqueta HTML5 que permite crear gráficos dinámicamente por medio del lenguaje de programación Java Script. Los gráficos pueden ser estáticos o simples animaciones. Además es importante saber que solamente los navegadores modernos soportan esta característica.
Cómo dibujar cuadrados en canvas con Java Script
Como primer paso tenemos que definir la etiqueta canvas en nuestro HTML de la siguiente forma.
<canvas id="micanvas" width="200" height="200"> Contenido que sólo verán los usuarios que no soportan canvas en su navegador. </canvas>
Luego en Java Script vamos a obtener el contexto del elemento canvas para poder dibujar.
var elemento = document.getElementById("micanvas");
var contexto = elemento.getContext('2d');
Finalmente para dibujar un cuadrado solamante debemos usar la funcion fillRect(x, y, width, height) del contexto:
contexto.fillRect(100, 100, 50, 50);
Si visualizamos el cuadrado en el navegador el resultado sería el siguiente:
Ahora si queremos cambiar el color del cuadrado solamente debemos utilizar el atributo fillStyle con el color hexadecimal:
contexto.fillStyle = "#FFBD16";
A continuación el código completo:
<!DOCTYPE html>
<html>
<head>
<title>Dibujar cuadrados en canvas con Java Script</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<canvas id="micanvas" width="200" height="200">
Contenido que sólo verán los usuarios que no soportan canvas en su navegador.
</canvas>
<script language="JavaScript">
window.onload = function(){
var elemento = document.getElementById("micanvas");
var contexto = elemento.getContext('2d');
contexto.fillStyle = "#FFBD16";
contexto.fillRect(100, 100, 50, 50);
}
</script>
</body>
</html>
Bueno gente, eso es todo lo básico que se necesita para dibujar cuadrados en canvas con Java Script. Espero que les sea de gran utilidad y ante cualquier problema no duden en enviar un comentario.
Quiero colocar un evento onclick al cuadrado dibujado, es decir cuando de click sobre el cuadrado este cambie de posición.
Hola Franklin, gracias por pasarte por el blog. Lo que queres hacer es un poco complejo, te dejo un enlace donde explican con un ejemplo sencillo como hacerlo http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element
Saludos.
Necesito dibujar dos cuadrados en canvas con dos métodos distintos, pero no me deja, no se ven.
Hola Diana, tendría que ver el código para poder ayudarte correctamente.