Question

我最近正在开发一个javascript画布项目，js代码如下所示：

＆＃13;

$(document).ready(function() {
  canvasWidth = 500;
  canvasHeight = 100;
  var canvasDiv1 = document.getElementById('canvasDiv1');
  var canvasDiv2 = document.getElementById('canvasDiv2');

  //canvas 1
  canvas1 = document.createElement('canvas');
  canvas1.setAttribute('width', canvasWidth);
  canvas1.setAttribute('height', canvasHeight);
  canvas1.setAttribute('id', 'canvas1');
  //canvas 2  
  canvas2 = document.createElement('canvas');
  canvas2.setAttribute('width', canvasWidth);
  canvas2.setAttribute('height', canvasHeight);
  canvas2.setAttribute('id', 'canvas2');

  canvasDiv1.appendChild(canvas1);
  canvasDiv2.appendChild(canvas2);

  if (typeof G_vmlCanvasManager != 'undefined') {
    canvas1 = G_vmlCanvasManager.initElement(canvas1);
  }
  if (typeof G_vmlCanvasManager != 'undefined') {
    canvas2 = G_vmlCanvasManager.initElement(canvas2);
  }

  context1 = canvas1.getContext("2d");
  context2 = canvas2.getContext("2d");



  //the border for canvas 1
  context1.lineWidth = 5;
  context1.strokeStyle = "#000000";
  context1.strokeRect(0, 0, canvas1.width, canvas1.height); //for white background 
  //the border for canvas 2      
  context2.lineWidth = 5;
  context2.strokeStyle = "#000000";
  context2.strokeRect(0, 0, canvas2.width, canvas2.height); //for white background

  var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var paint;

  function addClick(x, y, dragging) {
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
  }

  function redraw1() {
    context1.clearRect(0, 0, context1.canvas.width, context1.canvas.height); // Clears the canvas
    context1.strokeStyle = "#df4b26";
    context1.lineJoin = "round";
    context1.lineWidth = 5;

    for (var i = 0; i < clickX.length; i++) {
      context1.beginPath();
      if (clickDrag[i] && i) {
        context1.moveTo(clickX[i - 1], clickY[i - 1]);
      } else {
        context1.moveTo(clickX[i] - 1, clickY[i]);
      }
      context1.lineTo(clickX[i], clickY[i]);
      context1.closePath();
      context1.stroke();
      //the border        
      context1.strokeStyle = "#000000";
      context1.strokeRect(0, 0, canvas1.width, canvas1.height); //for white background    

    }
  }

  function redraw2() {
    context2.clearRect(0, 0, context2.canvas.width, context2.canvas.height); // Clears the canvas

    context2.strokeStyle = "#FFFF00";
    context2.lineJoin = "round";
    context2.lineWidth = 5;

    for (var i = 0; i < clickX.length; i++) {
      context2.beginPath();
      if (clickDrag[i] && i) {
        context2.moveTo(clickX[i - 1], clickY[i - 1]);
      } else {
        context2.moveTo(clickX[i] - 1, clickY[i]);
      }
      context2.lineTo(clickX[i], clickY[i]);
      context2.closePath();
      context2.stroke();
      //the border        
      context2.strokeStyle = "#FFFF00";
      context2.strokeRect(0, 0, canvas2.width, canvas2.height); //for white background    

    }
  }


  //canvas mouse func for canvas 1
  $('#canvas1').mousedown(function(e) {
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    paint = true;
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    redraw1();
  });

  $('#canvas1').mousemove(function(e) {
    if (paint) {
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
      redraw1();
    }
  });

  $('#canvas1').mouseup(function(e) {
    paint = false;
  });

  $('#canvas1').mouseleave(function(e) {
    paint = false;
  });

  //canvas mouse func for canvas 2
  $('#canvas2').mousedown(function(e) {
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    paint = true;
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    redraw2();
  });

  $('#canvas2').mousemove(function(e) {
    if (paint) {
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
      redraw2();
    }
  });

  $('#canvas2').mouseup(function(e) {
    paint = false;
  });

  $('#canvas2').mouseleave(function(e) {
    paint = false;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvasDiv1"></div>
<div id="canvasDiv2"></div>

＆＃13;

问题：

为什么当我首先使用canvas1然后点击canvas2时，canvas1上的绘图会被复制到canvas2，反之亦然。我需要在canvas1和canvas2之间独立绘图。

我已在JSBIN准备了演示链接，请查看

任何帮助都会很棒。感谢。

Answer 1

您只有一个clickX，clickY和clickDrag数组，您可以在redraw1()和redraw2()中使用这些数组。如果您希望每个画布彼此独立，则需要使用单独的数组。

javascript：画布绘图互相克隆

1 个答案: