爲什麼當我在jquery中移動鼠標時，圖像保持刷新？

<canvas id="myCanvas" width="800" height="500"></canvas> 
<script src="js/jquery-1.11.3.js"></script> 
<script> 

    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 


    var snipeImg=new Image(); // Image 객체 생성하기 
    snipeImg.src="images/snipe.png"; 


    var holeImg = new Image(); 
    holeImg.src="images/hole.png"; 

    var holeList =[]; 
    intervalId = setInterval(drawScreen, 20); 

    $('#myCanvas').mousemove(function(event){ 

     context.clearRect(0,0,800,500); 
    // context.save(); 
     //canvas 내에서의 마우스의 좌표 얻어오기 
     var eventX =event.offsetX -50; 
     var eventY =event.offsetY -50; 
     context.drawImage(snipeImg,eventX,eventY,100,100); 
//  context.restore(); 
    }); 
    $('#myCanvas').mousedown(function(event){ 

     context.clearRect(0,0,800,500); 

     var holeX =event.offsetX-10; 
     var holeY =event.offsetY-10; 
     console.log(holeX + " , " + holeY); 

     var obj={}; 
     obj.x = holeX; 
     obj.y = holeY; 
     holeList.push(obj); 

    }); 




    function drawScreen(){ 

     for(var i in holeList){ 
      context.save(); 

      var tmp = holeList[i]; 

      context.drawImage(holeImg,tmp.x,tmp.y,20,20); 
      context.restore(); 
     } 
    };

這是我的代碼。這是我的射擊遊戲的一部分。但我不知道爲什麼holeList []圖像保持清爽（閃爍）當我的鼠標移動。任何人都知道爲什麼？請幫幫我。我只是想讓這些holeImg []一動不動。爲什麼當我在jquery中移動鼠標時，圖像保持刷新？

來源

2015-09-18 Yuri Bae

請您可以創建的jsfiddle並添加一些HTML的呢？ –

提供給我們一個例子，我不能在jsfiddle中工作... –

看看你的代碼示例，你確定'drawScreen'沒有被其他事件處理程序調用嗎？我會在'drawScreen'和mousemove處理程序中放置一個斷點，並查看是否從鼠標動作調用drawScreen。 – Jason

的問題是在這條線，

intervalId = setInterval(drawScreen, 20);

圖像不斷刷新每20ms

如果除去實現，添加「drawScreen」內部「mosuemove」和「鼠標按下」事件處理程序，有將是沒有問題的。除非，如果你有任何理由不想在事件中使用它。

Working sample

來源

2015-09-18 10:04:44 choz

爲什麼當我在jquery中移動鼠標時，圖像保持刷新？

回答

相關問題