Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/07/2021, 15:13
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

En ese caso, también tienes que cambiar $('#v1sign') por $('#v2sign'), $('#v3sign') etc, para cada uno de los 3 scripts.

Aunque, en lugar de cargar 3 scripts distintos para cada canvas, es mucho mejor tener un único script que defina una función y pasarle un parámetro con el ID del canvas que quieres inicializar. El código sería algo así:

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.     function clearArea() {
  45.         vj.setTransform(1, 0, 0, 1, 0, 0);
  46.         vj.clearRect(0, 0, vj.canvas.width, vj.canvas.height);
  47.     }
  48.  
  49.     InitThisvj();
  50. }

Y lo deberías inicializar así:

Código HTML:
Ver original
  1. <script language="javascript">
  2. function startsign(){
  3.     iniciarCanvas("v1sign");
  4.     iniciarCanvas("v2sign");
  5.     iniciarCanvas("v3sign");
  6. }
  7. </head>
  8. <body onload="startsign()">

Así solo tendrías que cargar el script una vez.



Última edición por prueba230683; 09/07/2021 a las 15:40