동적으로 Canvas를 만들고 onmousedown 기능을 추가하십시오.

Question

런타임에 여러 캔버스 요소를 동적으로 작성해야합니다. 나는 canvas를 잘 만들었지 만 'onmousedown'속성을 메서드에 설정하는 것은 어렵다는 것을 입증했습니다. 이것은 잘 모르겠지만 함수를 통해 canvas 요소를 전달해야하는 bacuse 일 수 있습니다. 누구든지 도와 줄 수 있습니까?

감사합니다.

다음은 순서대로 볼 수 있습니다. 원래의 정적 캔버스, 동적으로 캔버스를 만드는 루프 및 'onmousedown'으로 설정해야하는 기능입니다.

<canvas id="Canvas1" onmousedown="MouseDown(this, event)" onmousemove="MouseMove(event)" onmouseup="MouseUp(event)" width="0" height="600" style="overflow: hidden; position: absolute; top: 0px;"> 

for(var i = 1; i < total; i++) 
{ 
    var div = document.getElementById("Control"); 
    var canv = document.createElement('canvas'); 
    canv.id = "Canvas" + i.toString();   
    canv.width= 0+'px'; 
    canv.height= 600+'px'; 
    canv.style.overflow = 'hidden'; 
    canv.style.position = 'absolute'; 
    canv.style.top = 0+'px'; 

    div.appendChild(canv); 
} 

function MouseDown(can, e) 
{ 

    MovingCanvas = can; 
    alert("got here"); 
    clicked = true; 
    MouseX = e.clientX; 
    MouseY = e.clientY; 

    StartX = MovingCanvas.style.left; 
    StartY = MovingCanvas.style.top; 
} 

Answer 1

그냥 루프 내부의 콜백 처리기를 추가 : 이것은 단지 하나 개의 인수, 이벤트를 줄 것이다

for(var i = 1; i < total; i++) { 

    --- 8X --- 

    /// add a callback handler here by referencing the function 
    canv.onmousedown = MouseDown; 

    div.appendChild(canv); 
} 

하는 것으로. 그러나 콜백은 this으로 콜백을 호출하는 현재 캔버스를 바인딩 할 필요가 없습니다. 그래서 당신은 오히려 당신의 콜백 함수를 수정할 수 있습니다

/// callback only gives one argument to the function, the event 
function MouseDown(e) { 

    /// this will be current canvas that called this function 
    MovingCanvas = this; 

    --- 8X --- 
} 

와 다음의 과정이뿐만 아니라 수정해야합니다 : 최고

<canvas id="Canvas1" onmousedown="MouseDown(event)" ... 
              ^^^^^