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&iacute;.</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?

Carlos Dk

Apasionado por la enseñanza y el SEO

4 comentarios en “Evento Click en HTML5 (pintar con el ratón)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.