Evento Click en HTML5 (pintar con el ratón)
Bienvenidos a Vertutoriales.com, en esta ocasión volvemos a traer un ejemplo de como utilizar el evento Click para pintar en HTML5 un punto en rojo, veremos que no es muy complejo despues de los ejemplos anteriormente dados.
Para ello necesitareis revisar los tutoriales sobre HTML5 que ya tenemos realizados, para las llamadas y otras tantas, pero vamos a ver el código que necesitamos y las diferencias con el resto. Lo primero será la declaración de la función
window.onload = function(){
click();
};function click(){
//Añadimos un addEventListener al canvas, para reconocer el click
canvas.addEventListener(“click”,
//Una vez se haya clickado se activará la siguiente función
function(e){
pintar(e.clientX, e.clientY);
}
,false);
}
Con estas dos funciones ya tendremos lista nuestra función de pintado con el ratón, si le aunamos el resto de código de creación del objeto canvas y la configuración pertinente con la declaración de variables nos quedaría:
<script type=”text/javascript”>
//Declaro variables
var x = 0;
var y = 0;
var x2 = 0;
var y2 = 0;window.onload = function(){
click();
};function dibujar(x,y,x2,y2){
canvas = document.getElementById(“canvas”);
ctx = canvas.getContext(“2d”);ctx.fillStyle = “red”;
ctx.fillRect(x, y, x2, y2);
ctx.fill();
}function click(){
//Añadimos un addEventListener al canvas, para reconocer el click
canvas.addEventListener(“click”,
//Una vez se haya clickado se activará la siguiente función
function(e){
pintar(e.clientX, e.clientY);
}
,false);
}function pintar(x, y){
dibujar(x, y, 5, 5);
}</script>
<html>
<body>
<canvas id=”canvas” height=”500px” width=”500px”>
Su navegador no soporta Canvas!
</canvas>
<a href=”http://www.vertutoriales.com/” target=”_blank”>Para ver el tutorial click Aquí.</a>
</body></html>
Y listo! con este código podreis pintar puntos rojos de 5×5 píxeles sobre el Canvas de HTML5.
Estos ejercicios que estamos realizando actualmente serán parte de la investigación de un tilador que queremos realizar online. Además de seguir con la colaboración con http://forohtml5.com en el cual comenzamos un curso y queremos seguir ampliando con más ejemplos.
Para terminar os dejo el ejemplo de evento click en html5 que pinta puntos rojos
¿Que se os ocurre hacer con esto?
Comments
Como puedo hacer para cambiar de imagen al dar click. es decir doy clik en una imagen y m muestre otra. como hago??
Necesitas utilizar el evento onclick sobre la imagen que quieres modificar, cuando hagas onclick, llama a la función en javascript que modifique el src de de la imagen y listo.
Estoy por aquí si necesitas aclararte más.
Un saludo!