Hola a todos y gracias como siempre de antemano, por cualquier ayuda sobre el tema.
Estoy desarrollando una página en HTML y JAVASCRIPT, donde pueda registrar 3 viajeros. A parte de introducir varios datos necesito que los viajeros firmen cada uno en su lugar y para ello he insertado 3 canvas.
Adjunto código:
Código:
<label>Firma del viajero 1</label><br>
<div>
<script type="text/javascript" src="v1sign.js"></script>
<canvas id="v1sign"></canvas>
<br>
<button onclick="javascript:clearArea();return false;">Limpiar</button>
</div><br>
Este código se repite para los viajeros 2 y 3 en diferentes lugares de la página.
El archivo al que llama el script contiene el siguiente código:
Código:
var mousePressedvj1 = false;
var lastXvj1, lastYvj1;
var vj1;
function InitThisvj1() {
vj1 = document.getElementById('v1sign').getContext("2d");
$('#v1sign').mousedown(function (e) {
mousePressedvj1 = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$('#v1sign').mousemove(function (e) {
if (mousePressedvj1) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$('#v1sign').mouseup(function (e) {
mousePressedvj1 = false;
});
$('#v1sign').mouseleave(function (e) {
mousePressedvj1 = false;
});
}
function Draw(x, y, isDown) {
if (isDown) {
vj1.beginPath();
vj1.strokeStyle = "blue";
vj1.lineWidth = "3";
vj1.lineJoin = "round";
vj1.moveTo(lastXvj1, lastYvj1);
vj1.lineTo(x, y);
vj1.closePath();
vj1.stroke();
}
lastXvj1 = x; lastYvj1 = y;
}
function clearArea() {
vj1.setTransform(1, 0, 0, 1, 0, 0);
vj1.clearRect(0, 0, vj1.canvas.width, vj1.canvas.height);
}
Lo que me ocurre es lo siguiente: Al insertar el último código, el del CANVAS 3, el único que funciona es el mismo CANVAS 3, es decir, si yo dibujo en el canvas 1, lo que he pintado se muestra en el canvas 3... si dibujo en el canvas 2 se muestra tambien en el canvas 3... El canvas 1 y 2 no muestran las lineas que dibujo con el ratón... y cada uno debería de ser independiente.
Cada canvas tiene su archivo: v1sign para el canvas 1, v2sign para el canvas 2 y v3sign para el canvas 3, pero el unico que funciona es el 3, de hecho si quito el 3, empieza a funcionar el 2... Los archivos los modifico cada uno con v1sign, v2sign o v3sign segun el caso en
Código:
document.getElementById('v1sign').getContext("2d");
y tambien cambio el nombre de las variables por vj1, vj2 y vj3.
Para llamar las funciones uso esto:
Código:
<script language="javascript">
function startsign(){
InitThisvj1();
InitThisvj2();
InitThisvj3();
}
</script>
</head>
<body onload="startsign()">
He probado unas cuantas cosas y o bien sigo igual o bien deja de funcionar todo directamente y javascript no es mi fuerte... Alguien que haya trabajado con varios canvas puede echarme una mano?
Mil gracias de antemano.
Un abrazo!!