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:
Este código se repite para los viajeros 2 y 3 en diferentes lugares de la página.<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>
El archivo al que llama el script contiene el siguiente código:
Código:
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.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); }
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:
y tambien cambio el nombre de las variables por vj1, vj2 y vj3.document.getElementById('v1sign').getContext("2d");
Para llamar las funciones uso esto:
Código:
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?<script language="javascript"> function startsign(){ InitThisvj1(); InitThisvj2(); InitThisvj3(); } </script> </head> <body onload="startsign()">
Mil gracias de antemano.
Un abrazo!!