CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Yuri Bae
Yuri Bae

Reputation: 63

Why Image Keep Refreshing when I mousemove in 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();
        }
    };

here is my code. This is part of my Shooting game. but I don't know why holeList[] Images keep refreshing(twinkle) when I mouse-move. Anyone knows why? please help me. I just wanna make these holeImg[] being motionless.

Upvotes: 0

Views: 82

Answers (1)

choz
choz

Reputation: 17898

The problem is in this line,

intervalId = setInterval(drawScreen, 20);

The image keeps refreshing every 20ms

If you remove the implementation and add 'drawScreen' inside 'mosuemove' and 'mousedown' event handlers, there will be no problem. Unless, if you have any reason why you don't want to call it inside the events.

Working sample

Upvotes: 3

Related Questions