¿como cambio de color un canvas con un clic en html5?

publicado por: Anonymous

Disculpe pero quisiera saber como puedo hacer para cambiar de color un dibujo en canvas por el metodo de darle clic al dibujo.
Es para otro tipo trabajo pero solo quiero el metodo de darle un clic al dibujo y que realize una accion.

solución

_x000D_

_x000D_

window.onload = function(){_x000D_
  var canvas = document.getElementById("canvas");_x000D_
  var ctx = canvas.getContext("2d"); _x000D_
  ctx.fillStyle = "green";_x000D_
  ctx.fillRect(10, 10, 200, 200);_x000D_
  ctx.fill();_x000D_
  canvas.addEventListener("click", function(e){_x000D_
    if(e.clientX-canvas.offsetLeft > 10 && e.clientX-canvas.offsetLeft < 210){_x000D_
      if(e.clientY-canvas.offsetTop > 10 && e.clientY-canvas.offsetTop < 210){_x000D_
        ctx.fillStyle = "red";_x000D_
        ctx.fillRect(10, 10, 200, 200);_x000D_
        ctx.fill();_x000D_
      }_x000D_
    } _x000D_
  },false);_x000D_
};_x000D_
        

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
    <meta charset="UTF-8">_x000D_
    <title>Un canvas</title>_x000D_
</head>_x000D_
<body>_x000D_
        <canvas width="1080" height="720" id="canvas"></canvas>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

Tienes que añadir un eventListener y luego buscar en que zona de la pantalla se ha hecho click, este ejemplo superpone un cuadrado rojo sobre el otro.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *