鼠标在HTMLcanvas中移动时图像闪烁

我已经看过这些线程1和线程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

我假设你正在为每个mousemove调用draw 。

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

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

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