HTML5画布中的所有鼠标可拖动对象都基于setInterval吗？答案

【问题标题】：Are all mouse draggable objects in HTML5 canvas based on setInterval?HTML5画布中的所有鼠标可拖动对象都基于setInterval吗？
【发布时间】：2012-08-08 16:44:35
【问题描述】：

我正在 HTML5 画布中制作几何光学演示，鼠标指向光源，您可以制作一些障碍物，javascript 进行计算并在这些障碍物后面的线上显示光影。

从我在网上找到的那些画布拖放教程中，所有他们都使用setInterval() 来进行鼠标交互，这意味着整个画布都被更新并重新绘制了所有时间。这让我觉得整个画布业务是一个丑陋的黑客。

我的问题是：有没有其他方法可以在没有setInterval() 方式的情况下在canvas 中进行鼠标交互？我想画一次背景，只在onmousemove鼠标实际移动时重画移动部分。

任何想法都值得赞赏。谢谢:)

【问题讨论】：

我也将setInterval() 用于带有鼠标交互的画布绘图应用程序。有一个名为requestAnimationFrame 的函数，但它基本上是setInterval 的增强版，所以可能不是你要找的。span>
问题是<canvas> 真的很像画布——你不能在上面“取消绘制”。
@Pointy：你可以使用两个<canvas>，一个用于背景，每次清除另一个用于鼠标的东西。
@pimvdb 像双缓冲区？
@pimvdb 是的，这是真的 - 您还可以在画布上为普通的 <img> 元素设置动画。

标签： javascript html canvas setinterval

【解决方案1】：

您可以在不拖动元素的情况下重绘画布，然后将元素绘制到基础顶部的新画布上。然后您可以使用绝对定位来移动被拖动的对象无需重绘。

【讨论】：

【解决方案2】：

画布元素上有一个可用的鼠标移动。我一直在使用它，我相信它在您的情况下非常有用。

您也可以使用 setInterva 来完成，但在这种情况下，这对我来说听起来有点脏。无论如何，您都需要获取鼠标 X 和 Y，在 mousemove 事件中有什么更好的地方来做到这一点！

【讨论】：

【解决方案3】：

看那篇文章：http://www.splashnology.com/article/fifteen-puzzle-in-libcanvas/1632/

有一些方法可以优化画布绘制。首先 - 不重绘整个画布，只改变部分。并且仅在发生变化时重绘。

在工作中，我现在基于LibCanvas 创建游戏，而我在另一层绘制背景。类似的东西：

var libcanvas  = new LibCanvas( 'canvas' ).start();
var background = libcanvas.createLayer( 'bg', 0 );
drawBackgroundAt  ( background );
startApplicationAt( libcanvas );

【讨论】：

【解决方案4】：

先绘制背景，然后用 canvas.save() 保存画布。

关于鼠标交互：canvas.restore() 并绘制您的绘图。

【讨论】：

【解决方案5】：

我认为您遇到的是每次进行鼠标交互时都需要setInterval 来更新画布。这对你来说有点难看，因为在你看来这就像“黑客”。

您不必为此感到难过，因为您将需要该机制来处理任何应该设置动画的内容。

但是您可以在通过 setInterval 调用的方法中进行“剪辑”，您可以决定应该更新画布的哪个部分并仅重绘该部分。

如果您不需要不断更新您的内容，因为它不是动画的，我同意 Elmer。

但是通过 setInterval 更新画布既不丑也不脏 ;-) 如果你想为某些东西设置动画，这是你保持画布更新的方式。

【讨论】：

【解决方案6】：

这个问题我要答完了，答案应该是requestAnimationFrame from pimvdb

【讨论】：