のjavascript：キャンバスの描画クローニング私は最近、JavaScriptのキャンバスプロジェクトに取り組んでいますお互い

Question

は、JSコードは、ルックのような以下の通りです：

$(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; 
 
    }); 
 
});

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

問題：

理由最初にcanvas1を描画してからcanvas2をクリックすると、canvas1の図がcanvas2にコピーされます。逆に。私はcanvas1とcanvas2の間で独立して描画が必要です。私はJSBINでデモリンクを用意しました

は、任意のヘルプは素晴らしいことだ

ご覧下さい。ありがとう。

Answer 1

あなただけがredraw1()とredraw2()の両方で使用するものclickX、clickY、およびclickDrag配列を持っています。お互いに独立させたい場合は、それぞれのキャンバスに別々の配列が必要です。