鼠标在HTML画布中移动时，图像闪烁 [英] Image flickers when mouse moves in HTML canvas

问题描述

我已查看过这些主题1 和线程2 ，但是当鼠标移动时我仍然闪烁。

I already looked in these thread 1 and thread 2, but I still got the flickering when the mouse move.

我的代码：

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


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

希望有人能给我一个关于如何解决闪烁问题的想法或解决方案。

Hopefully someone can give me an idea or solution on how to solve my flickering problem.

推荐答案

我假设你每次调用 draw mousemove。

I'm assuming you're calling draw for each mousemove.

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

Mousemove events occur about 30 times a second so there is not enough time to load an image inside a mousemove handler.

而是，在应用程序开始时加载图片一次。

Instead, load the image once at the start of your app.

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

Then ctx.drawImage has enough time to draw that preloaded image during each mousemove event.

这篇关于鼠标在HTML画布中移动时，图像闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！