Question

<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 []图像会保持刷新（闪烁）。谁知道为什么？请帮我。我只是想让这些漏洞[]一动不动。

Answer 1

问题出在这一行，

intervalId = setInterval(drawScreen, 20);

图像每20毫秒保持刷新

如果删除实现并在'mosuemove'和'mousedown'事件处理程序中添加'drawScreen'，则没有问题。除非，如果您有任何理由不想在活动中调用它。

Working sample

当我在Jquery中移动时，为什么Image会保持刷新？

1 个答案: