Como se hace?

miche23 · #1 (**permalink**) 21/12/2012, 06:15

Hola,
Quiero crear una serie de cuadrados con canvas , se hacerlo.
Quiero que cuando toque el cuadrado a se coloree el b y cuando toque el d se coloree el c, no se hacerlo
Mi duda principal es:
Tengo que crear varios cambas para cada cuadrado o en un mismo canvas se hace todo?
muchas gracias

emprear · #2 (**permalink**) 21/12/2012, 13:11

Crear los cuadros, se puede de las dos formas. Pero hacerlos por separado simplifica el agregarles un evento,

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>canvas</title>
    </head>
<body>
<p>un canvas</p>
<canvas id="cvn0" width="200" height="50" style="border:1px solid #c3c3c3;"></canvas>
 
<p>cuatro canvas</p>
<canvas id="cvn1" width="50" height="50" style="border:1px solid #c3c3c3; background: red;margin: 0;"></canvas>
<canvas id="cvn2" width="50" height="50" style="border:1px solid #c3c3c3; background: blue; margin:0;" onclick="alert('segundo cuadro azul')"></canvas>
<canvas id="cvn3" width="50" height="50" style="border:1px solid #c3c3c3; background: green; margin:0;"></canvas>
<canvas id="cvn4" width="50" height="50" style="border:1px solid #c3c3c3; background: lime;margin: 0;"></canvas>
<script type="text/javascript">
var c=document.getElementById("cvn0");
 
var cuadro=c.getContext("2d");
cuadro.fillStyle="#FF0000";
cuadro.fillRect(0,0,50,50);
 
var cuadro2=c.getContext("2d");
cuadro2.fillStyle="blue";
cuadro2.fillRect(50,0,50,50);
 
var cuadro3=c.getContext("2d");
cuadro3.fillStyle="green";
cuadro3.fillRect(100,0,50,50);
 
var cuadro4=c.getContext("2d");
cuadro4.fillStyle="lime";
cuadro4.fillRect(150,0,50,50);
 
 
//
var cl = document.getElementById('cvn1');
cl.addEventListener('click', function(){ alert('segundo cuadro rojo');}, false);
</script>
</body>
</html>

Y si solo fuesen cuadros, yo en particular evitaría el canvas y utilizaría un div (o un figure de html5), sería más compatible

saludos