Hola gentes, estoy estudiando un poco canvas y estoy queriendo hacer una especie de paint (no lo voy a usar para eso pero para que entiendan el funcionamiento), lo que quiero hacer es apretar un botón que diga linea, entonces cuando yo hago click con el mouse dibujarla despues de mousedown y mouseup para obtener las coordenadas y dibujar la linea.
El problema es que probé con addEventListener y no puedo porque no retorna un valor.
Les muestro mi código para que entiendan mejor xD.
También estoy aprendiendo js xD lo que si no quiero usar es jquery ni nada por el estilo, prefiero usar todo código mio... aunque me lleve mas dolores de cabeza je.
Saludos
el html
Código:
<html>
<head>
<title>Paint con HTML5</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script type="text/javascript" src="ObjCanvas.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600">
</canvas><br>
<input type="button" id="cuadrado" value="cuadrado" onclick="seleccion(this.value)"/>
<input type="button" id="linea" value="linea" onclick="seleccion(this.value)"/>
<input type="button" id="ovalo" value="ovalo" onclick="seleccion(this.value)"/>
<input type="button" id="borrador" value="Borrar Todo" onclick="seleccion(this.value)" />
</body>
</html>
El js
Código:
document.addEventListener("DOMContentLoaded", iniciar, false);
function iniciar(){
var canvas = document.getElementById("canvas");
contexto = canvas.getContext("2d");
}
function ObtenerCoords(event){
var x = new Number();
var y = new Number();
var canvas = document.getElementById("canvas");
if (event.x != undefined && event.y != undefined){
x = event.x;
y = event.y;
}else{// Firefox
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
var result=x+","+y;
return result;
}
function seleccion(value){
switch(value)
{
case "linea":
linea();
break;
case "cuadrado":
cuadrado();
break;
default:
selec();
}
}
function linea() {
var coors;
contexto.strokeStyle = "rgb(200,200,200)";
contexto.beginPath();
coors= contexto.addEventListener('mousedown', ObtenerCoords, false);
contexto.moveTo(coor);
coors= contexto.addEventListener('mouseup', ObtenerCoords, false);
contexto.lineTo(coor);
contexto.stroke();
}
function cuadrado() {
contexto.fillStyle = "rgb(41,155,243)";
contexto.fillRect (10, 10, 180, 180);
}