在javascript画布上绘制的图像闪烁

Question

好的，我有以下代码在60hz（1000/60）

运行

setInterval(update, 1000/60);

function makecard()
{
    base_image = new Image();
    base_image.src = 'cardbase.png';
    base_image.onload = function(){
        drawrect(798,398,4+275,4+183,"black");
        cc.drawImage(base_image, 800, 400);
    }

    base2_image = new Image();
    base2_image.src = 'card2base.png';
    base2_image.onload = function(){
        drawrect(165,398,4+275,4+183,"black");
        cc.drawImage(base2_image, 167, 400);
    }
}

function update(){
    makecard();
}

在画布上绘制两个图像。

问题是我有一个mousemove和一个mousedown事件来检查用户是否在图像中点击，但是当我将鼠标移到图像外时，两个图像都会闪烁。

c.addEventListener('mousemove', function(evt) {
    mousePos = getMousePos(c, evt);
    console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y);

    }, false);

c.addEventListener('mousedown', function() {
    if(mousePos.x >= 798 && mousePos.x <= 798 + 275 + 4 && mousePos.y >= 398 && mousePos.y <= 398 + 183 + 4){
            if(drawcardbool == false){
                drawcardbool = true;
                currentCard = Math.floor((Math.random() * 4) + 1)-1;
                counter = 5;
                var refreshIntervalId = setInterval(function(){
                counter = counter - 1;
                if (counter==0){
                clearInterval(refreshIntervalId);
                drawcardbool = false;
                } 
                }, 1000);
            }
        }
    }, false);

当我将帧速率从60赫兹降低到30赫兹时，情况变得更糟。

有人帮助我！