鼠标在HTML画布中移动时图像闪烁

Question

我已经查看了这些thread 1和thread 2，但是当鼠标移动时我仍然会闪烁。

我的代码：

    function draw(){
    var img = new Image();
    img.src = "/Sample/Icons/sample.png";


    img.onload = function () {     
        ctx.drawImage(img, X1, Y1, 25, 25);                       
    };
  }

希望有人可以就如何解决我的闪烁问题给​​我一个想法或解决方案。

Answer 1

我假设您为每个鼠标移动调用draw。

Mousemove事件每秒发生大约30次，因此没有足够的时间在mousemove处理程序中加载图像。

相反，请在应用开始时加载一次图像。

然后ctx.drawImage有足够的时间在每次mousemove事件期间绘制预加载的图像。