Javascript 为什么我在Jquery中移动鼠标时图像会保持刷新？ var canvas=document.getElementById（“myCanvas”）； var context=canvas.getContext（“2d”）； var snipeImg=新图像（）；//形象객체 생성하기 snipeImg.src=“images/snipe.png”； var holeImg=新图像（）； holeImg.src=“images/hole.png”； var holeList=[]； intervalId=设置间隔（drawScreen，20）； $（'#myCanvas'）.mousemove（函数（事件）{ context.clearRect（0,0800500）； //context.save（）； //帆布내에서의 마우스의 좌표 얻어오기 var eventX=event.offsetX-50； var eventY=event.offsetY-50； drawImage（snipeImg，eventX，eventY，100100）； //restore（）； }); $（'#myCanvas'）.mousedown（函数（事件）{ context.clearRect（0,0800500）； var holeX=event.offsetX-10； var holeY=event.offsetY-10； 控制台日志（holeX+，“+holeY）； var obj={}； obj.x=holeX； obj.y=多孔； holeList.push（obj）； }); 函数drawScreen（）{ for（holeList中的var i）{ context.save（）； var tmp=holeList[i]； drawImage（holeImg，tmp.x，tmp.y，20,20）； restore（）； } };

这是我的密码。这是我射击游戏的一部分。但我不知道为什么当我移动鼠标时holeList[]图像会保持刷新（闪烁）。

---

有人知道为什么吗？请帮帮我。我只想让这些洞静止不动。

问题就在这条线上

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

图像每20毫秒刷新一次

如果删除该实现并在“mosuemove”和“mousedown”事件处理程序中添加“drawScreen”，则不会出现问题。除非，如果你有任何理由不想在事件内部调用它

---

问题出在这一行

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

图像每20毫秒刷新一次

如果删除该实现并在“mosuemove”和“mousedown”事件处理程序中添加“drawScreen”，则不会出现问题。除非，如果你有任何理由不想在事件内部调用它

---

问题出在这一行

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

图像每20毫秒刷新一次

如果删除该实现并在“mosuemove”和“mousedown”事件处理程序中添加“drawScreen”，则不会出现问题。除非，如果你有任何理由不想在事件内部调用它

---

问题出在这一行

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

图像每20毫秒刷新一次

如果删除该实现并在“mosuemove”和“mousedown”事件处理程序中添加“drawScreen”，则不会出现问题。除非，如果你有任何理由不想在事件内部调用它

---

请您创建JSFIDLE并为此添加一些html好吗？给我们举个例子，我无法让它在JSFIDLE中工作……看看您的代码示例，您确定没有从其他事件处理程序调用

drawScreen

？我会在

drawScreen

和mousemove处理程序中设置一个断点，看看是否有鼠标操作调用

drawScreen

。请创建JSFIDLE并为此添加一些html？给我们举个例子，我无法让它在JSFIDLE中工作…查看您的代码示例，您确定没有从其他事件处理程序调用

drawScreen

？我会在

drawScreen

和mousemove处理程序中设置一个断点，看看是否有鼠标操作调用

drawScreen

。请创建JSFIDLE并为此添加一些html？给我们举个例子，我无法让它在JSFIDLE中工作…查看您的代码示例，您确定没有从其他事件处理程序调用

drawScreen

？我会在

drawScreen

和mousemove处理程序中设置一个断点，看看是否有鼠标操作调用

drawScreen

。请创建JSFIDLE并为此添加一些html？给我们举个例子，我无法让它在JSFIDLE中工作…查看您的代码示例，您确定没有从其他事件处理程序调用

drawScreen

？我会在

drawScreen

和mousemove处理程序中放置一个断点，查看是否从鼠标操作调用

drawScreen

。