Question

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

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

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

任何想法都表示赞赏。谢谢:)）

Answer 1

您可以重绘没有拖动的元素，然后将元素绘制到基础顶部的新canas。然后，您可以使用绝对定位移动正在拖动的，而无需重新绘制。

Answer 2

canvas元素上有一个mousemove可用。我一直都在使用它，我相信它对你的情况非常有用。

你也可以用setInterva来做，但在这种情况下，这听起来有点脏。无论如何你需要得到鼠标X和Y，在mousemove事件中有什么好处！

Answer 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 );

Answer 4

首先绘制背景，然后使用canvas.save（）保存画布。

鼠标交互：canvas.restore（）并绘制图纸。

Answer 5

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

你不必为此感到难过，因为对于任何应该动画的东西你都需要这种机制。

但是你可以在通过setInterval调用的方法中执行“剪切”，你可以决定应该更新画布的哪一部分，只重绘那部分。

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

但是通过setInterval更新画布既不丑也不脏;-)如果你想动画一些东西，这就是你更新画布的方式。

Answer 6

我必须完成这个问题，答案应该是来自requestAnimationFrame

的pimvdb

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

6 个答案: