Ver Mensaje Individual
  #4 (permalink)  
Antiguo 10/07/2021, 12:04
prueba230683
 
Fecha de Ingreso: abril-2011
Mensajes: 170
Antigüedad: 11 años, 9 meses
Puntos: 68
Respuesta: Por qué CANVAS 1 y 2 dibujan en el CANVAS 3

Cita:
Lo único que ahora no me funciona el botón de limpiar para cada uno de los canvas, por si los viajeros se equivocan al hacer la firma.
Cierto. Como bien dices, tendrías que añadir al script una función así:

Código Javascript:
Ver original
  1. function limpiarCanvas(id_canvas) {
  2.     var vj = document.getElementById(id_canvas).getContext("2d");
  3.     vj.setTransform(1, 0, 0, 1, 0, 0);
  4.     vj.clearRect(0, 0, vj.canvas.width, vj.canvas.height);
  5. }

y llamarla así para cada uno de los botones:

Código HTML:
Ver original
  1. <button onclick="limpiarCanvas("v1sign");return false;">Limpiar</button>
  2.  
  3. <button onclick="limpiarCanvas("v2sign");return false;">Limpiar</button>
  4.  
  5. <button onclick="limpiarCanvas("v3sign");return false;">Limpiar</button>

En definitiva, el script completo sería este:

Código Javascript:
Ver original
  1. function iniciarCanvas(id_canvas){
  2.     var mousePressedvj = false;
  3.     var lastXvj, lastYvj;
  4.     var vj;
  5.  
  6.     function InitThisvj() {
  7.         vj = document.getElementById(id_canvas).getContext("2d");
  8.  
  9.         var canvas = $('#' + id_canvas);
  10.  
  11.         canvas.mousedown(function (e) {
  12.             mousePressedvj = true;
  13.             Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
  14.         });
  15.  
  16.         canvas.mousemove(function (e) {
  17.             if (mousePressedvj) {
  18.                 Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
  19.             }
  20.         });
  21.  
  22.         canvas.mouseup(function (e) {
  23.             mousePressedvj = false;
  24.         });
  25.         canvas.mouseleave(function (e) {
  26.             mousePressedvj = false;
  27.         });
  28.     }
  29.  
  30.     function Draw(x, y, isDown) {
  31.         if (isDown) {
  32.             vj.beginPath();
  33.             vj.strokeStyle = "blue";
  34.             vj.lineWidth = "3";
  35.             vj.lineJoin = "round";
  36.             vj.moveTo(lastXvj, lastYvj);
  37.             vj.lineTo(x, y);
  38.             vj.closePath();
  39.             vj.stroke();
  40.         }
  41.         lastXvj = x; lastYvj = y;
  42.     }
  43.  
  44.     InitThisvj();
  45. }
  46.        
  47. function limpiarCanvas(id_canvas) {
  48.     var vj = document.getElementById(id_canvas).getContext("2d");
  49.     vj.setTransform(1, 0, 0, 1, 0, 0);
  50.     vj.clearRect(0, 0, vj.canvas.width, vj.canvas.height);
  51. }