HTML5 캔버스 다중 이미지

웹 페이지에 캔버스 2 개가 각각 다른 이미지를로드합니다. 내가 이미지를 클릭하면 드래그 앤 드롭 할 수 있기를 원합니다. 이 작업을 수행했지만 클릭 할 때 사용하는 캔버스를 어떻게 찾을 수 있습니까?HTML5 캔버스 다중 이미지

앞에있는 이미지 만 이동합니다. 활성 캔버스 나 이미지가 그려지는 것을 감지하거나 확인하는 방법이 있습니까?

필자는 JSFiddle을 완료하면 도움이 될 것입니다.

<!DOCTYPE html> 
<html> 
<head> 
<style> 

#layer1,#layer2 
{ 
    border:1px solid black; 
    width:500px; 
    height:500px; 
} 




<!-- #mouseCanvas,#mouseCanvas2, 
#canvasContainer 
{ 
    width:500px; 
    height:500px; 
} 
#mouseCanvas 
{ 
    border:9px solid black; 
    position:absolute; 
    left:0px; 
    top:0px; 
} 

#mouseCanvas2 
{ 
    border:12px red; 
    position:absolute; 
    left:0px; 
    top:0px; 
} 

#mouseCanvas 
{ 
    z-index=1; 
} 

#mouseCanvas2 
{ 
    z-index=2; 
} --> 

</style> 

<div id="canvasesdiv" style="position:relative; width:400px; height:300px"> 

<canvas id="layer1" 
style="z-index: 1; 
position:absolute; 
left:0px; 
top:0px; 
" height="300px" width="400"> 
This text is displayed if your browser does not support HTML5 Canvas. 
</canvas> 

<canvas id="layer2" 
style="z-index: 2; 
position:absolute; 
left:0px; 
top:0px; 
" height="300px" width="400"> 
This text is displayed if your browser does not support HTML5 Canvas. 
</canvas> 

</div> 



<script> 

var radius = 10; 

function mouseClicked(e) 
{ 

} 

function mouseDown(e) 
{ 

} 

function mouseMove(e) 
{ 
    if(window.event.which == 1) // left mouse button 
    { 
     g.beginPath(); 
     g.arc(e.x, e.y, radius, 0, Math.PI * 2); 
     g.fill(); 
     g.closePath(); 
    } 
} 


</script> 
</head> 
<body> 




<script> 
//basic setup use later 

//globals 
//******************************************* 
var canvas,canvas2; 
var g,g2; 
var img = new Image(); 
var img2 = new Image(); 
//******************************************* 

//******************************************* 
//globals for draggable image 
var size = 100; 
var x = 250; 
var y = 250; 
//******************************************** 


//start up 
//start up canvas 
//******************************************* 
initCanvas(500,500); 

loadImage("https://pbs.twimg.com/profile_images/604644048/sign051.gif",img,190,80,150, 150,g); 

loadImage("http://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg",img2, x - (size/2), y - (size/2), size, size,g2); 

attachEvents(); 


//attach mouse wheel 
//window.onmousewheel = document.onmousewheel = myMouseWheelFunction; 






function initCanvas(w,h) 
{ 
    /* Get the canvas id */ 
    canvas = document.getElementById("layer1"); 
    canvas2 = document.getElementById("layer2"); 

    /* Give the canvas a width and height */ 
    /* The width and height are in canvas logical units */ 
    canvas.width = w;  
    canvas.height = h; 

    canvas2.width = w;  
    canvas2.height = h; 

    /* Assign a graphics context to the canvas, so that we can draw on it */ 
    g = canvas.getContext("2d"); 
    g2 = canvas2.getContext("2d"); 

} 

function loadImage(myImageURL,imgObject,x,y,width,height,graphics) 
{ 
    imgObject.src = myImageURL; //"dkit.gif"; 

    imgObject.onload = function() 
    { 
     /* The rest of the code draws onto the graphics context */ 
     //g.drawImage(img, 0, 0, canvas.width, canvas.height); 

     //draggable code,centers image small in the middle 
     //context.drawImage(img,x,y,width,height); 
     //g.drawImage(imgObject, x - (size/2), y - (size/2), size, size); 
     graphics.drawImage(imgObject, x,y,width,height); 

     //imgObject.addEventListener('click', btnClick("loadImage 1")); 
    } 

} 

function btnClick(sMessage) 
{ 
     alert(sMessage); 
} 

function attachEvents() 
{ 
    //attach function to mouse click listener 
    //canvas.addEventListener('click', getImageObject); 

    //mouse move event 
    canvas.addEventListener('mousemove', dragImageonClick); 
    canvas2.addEventListener('mousemove', dragImageonClick); 

    //image events 
    //img.addEventListener('click', btnClick("1")); 
    //img2.addEventListener('click', btnClick("2")); 
} 


function myMouseWheelFunction(e) 
{ 
    unitChange = e.wheelDelta/120; // unitChange will be equal to either +1 or -1 

    // code to use the unitChange value is placed below 

    alert("mouse is scrolling"); 
} 



/* 
//draw image where ever user clicks 
function paintImageonClick(e) 
{ 
    if(window.event.which == 1) // left mouse button 
    { 
     g.clearRect(0, 0, canvas.width, canvas.height); 
     g.drawImage(img, e.x - 50, e.y - 50, 100, 100); 
    } 
} 
*/ 

function getImageObject(e) 
{ 
    console.log(e); 
} 


//allow the image to draggable 
function dragImageonClick(e) 
{ 
if(window.event.which == 1) // left mouse button 
    { 
     if(mouseIsInsideImage(e)) 
     { 
     g.clearRect(0, 0, canvas.width, canvas.height); 
     g2.clearRect(0, 0, canvas2.width, canvas2.height); 

     //problem here has how do i know which image the user click on 
     //********************************************************************************** 
     g.drawImage(img, x - (size/2), y - (size/2), size, size); 
     g2.drawImage(img2, x - (size/2), y - (size/2), size, size); 
     //********************************************************************************** 

     x = e.x; 
     y = e.y; 
     } 
    } 
} 

//dragable helper function 
function mouseIsInsideImage(e) 
{ 
    // x 
    if(e.x > x) 
    { 
     if((e.x - x) > (size/2)) 
     { 
      return false; 
     } 
    } 
    else // x >= e.x 
    { 
     if((x - e.x) > (size/2)) 
     { 
      return false; 
     } 
    } 
    // y 
    if(e.y > y) 
    { 
     if((e.y - y) > (size/2)) 
     { 
      return false; 
     } 
    } 
    else // y >= e.y 
    { 
     if((y - e.y) > (size/2)) 
     { 
      return false; 
     } 
    } 
    return true; 
} 


//dont know what this does 
/* 
img.onload = function() 
{ 
    g.drawImage(img, x - (size/2), y - (size/2), size, size); 
} 
*/ 

</script> 

</body> 
</html>

출처

2014-10-04 fuzzy dunlop