마우스 오버시 캔버스 그려지는 이미지 변경하기

Question

정말 캔버스 그려진 이미지를 바꾸는 데 어려움을 겪고 있습니다. 누군가 내가 여기에서 도움을 주거나 조언을 해줄 수 있는지 알 것입니다.

캔버스에 정적 플래그를 그렸습니다. 그리고 깃발도 그려 왔습니다. 마우스 오버시에이 깃발을 흔들기 위해 노력하고 있습니다.

필자는 원래 정적 파일과 흔들리는 파일이라는 두 개의 별도 파일을 만들어야한다고 생각했습니다. 그런 다음 window.location = canvas.toDataURL ("image /");을 사용하여 각각을 jpg/gif 이미지로 저장하십시오.

하지만 jquery/hover를 통해 동일한 파일에서이 모든 작업을 수행 할 수 있음을 발견했습니다. 어느 것이 더 간단하고 효율적인 방법으로 보인다. 어떤 조언/도움을 사전에

window.onload = function(){ 
    var flag = document.getElementById('banglaFlag'); 
    banglaStatic(flag, 320); 
    var timer = banglaWave(flag, 30, 15, 200, 200); 
}; 

function banglaStatic(canvas, width){ 
//Drawing the Bangladesh flag. 

    //Declaring variables that regard width and height of the canvas. 
    //Variables C to L are needed for the waving function. 
    var a = width/1.9; 
    var b = 200; 
    var c = 7*a/13; 
    var l = a/13; 
    canvas.width = b; 
    canvas.height = a; 
    var ctx = canvas.getContext('2d'); 
    var radius = 45; 




}; 

function banglaWave(canvas, wavelength, amplitude, period, shading){ 

    var fps = 30; 
    var ctx = canvas.getContext('2d'); 
    var w = canvas.width, h = canvas.height; 
    var od = ctx.getImageData(0,0,w,h).data; 
    // var ct = 0, st=new Date; 
    return setInterval(function(){ 
     var id = ctx.getImageData(0,0,w,h); 
     var d = id.data; 
     var now = (new Date)/period; 
     for (var y=0;y<h;++y){ 
      var lastO=0,shade=0; 
      for (var x=0;x<w;++x){ 
       var px = (y*w + x)*4; 
       var o = Math.sin(x/wavelength-now)*amplitude*x/w; 
       var opx = ((y+o<<0)*w + x)*4; 
       shade = (o-lastO)*shading; 
       d[px ] = od[opx ]+shade; 
       d[px+1] = od[opx+1]+shade; 
       d[px+2] = od[opx+2]+shade; 
       d[px+3] = od[opx+3]; 
       lastO = o; 
      } 
     } 
     ctx.putImageData(id,0,0); 
     // if ((++ct)%100 == 0) console.log(1000 * ct/(new Date - st)); 
    },1000/fps); 
} 

감사 : 여기

는 흔들며 국기에 대한 코드입니다.

Answer 1

어디에 문제가 있는지 잘 모르겠습니다. 어떤 이벤트 처리 코드도 보지 않았기 때문에 귀하의 질문입니다.

"마우스 이벤트 처리"기능을 정의하십시오. 당신은 사용자가 마우스를 이동할 때, 깃발을 이동하려는 경우 예를 들어, 같은 정의 : 다음

function mouseMove(event) { 
    var mouseX, 
     mouseY; 
    event.preventDefault(); // stops browser to do what it normally does 
    // determine where mouse is 
    mouseX = event.pageX; 
    mouseY = event.pageY; 
    // do something useful, e.g. change the flag to waving when mouse is over flag 
} 

을 호출 할이 기능을 등록 할 때 마우스 이동 :

canvas.addEventListener("mousemove", mouseMove, false); 

canvas은 깃발을 페인트하는 캔버스입니다. "mousemove"은 "mousedown", "mouseup", "mouseout"(캔버스를 떠나는 것), "마우스 휠"등과 같이 더 많은 이벤트 이름입니다. mouseMove은 함수 이름 (호출 된 이벤트 핸들러).

이벤트는 브라우저와 브라우저 (그리고 브라우저 버전)에 따라 조금씩 다르기 때문에 여러 브라우저에서 이벤트가 필요하면 이벤트 처리기를 구현해야 할 수도 있습니다.

희망 하시 ...

Answer 2

캔버스는 시트와 같습니다. 당신이 머무를 수있는 어떤 대상도 없습니다. 당신이하고 싶었던 것은 그냥 수행하는
는, 플래그의 영역을 결합,
는 'virtualnobi'대답을 따라 마우스 좌표가 그 지역에 떨어지면 사실은 당신이 원하는 무엇도 할 경우,
을 계산합니다.
mouseX=event.clientX;
mouseY=event.clientY;

경계 영역 (X) = (0,100) 인 사용

if (mouseX<100 && mouseX>0 && mouseY>0 && mouseY<100){
//animate the flag
}

같은 여기 (0,100) = Y.