tl;博士
显示第二个画布元素意味着用户's touch is lost - I don' t希望用户必须再次触摸屏幕
我正在构建一个HTML5 Canvas游戏（游戏显示一张图片，将其切成拼图，然后以随机顺序显示这些碎片，以便用户将碎片重新组合在一起） .
源代码（对于我的开发分支）可以在这里看到：
https://github.com/Integralist/HTML5-Image-Slider-Game/tree/dragdrop
游戏的一个关键部分是，如果用户点击拼图块，则所选择的棋子移动到拼图中的任何可用空间 . 如果用户持有他们的点击超过几毫秒，我认为他们想要拖动他们选择的拼图而不是自动移动它们 .
我这样做的方法是在原画布上放置另一个画布 . 第二个画布仅用于“拖放”设施 . 我走这条路的原因是，否则，在拖动我的拼图时，我需要存储当前的拼图状态然后不断重绘 - 这是我出于性能原因不想做的事情 .
到目前为止，我在基于鼠标的计算机上运行得很好，因为在我设置要在第二个画布上拖动的部分后，我有一个mousemove事件，它只是触发并让用户在画布上拖动它 .
我遇到的问题是触摸设备，因为没有mousemove事件我正在使用touchmove事件，但当我显示第二个画布并开始拖动过程时，我必须再次触摸屏幕以触发touchmove监听器 . 至于一个用户担心这是可怕的，因为他们点击并将他们的手指放在他们的设备上，但显示的第二个画布导致手指触摸失去焦点，所以他们会有点失望，他们现在需要再次触摸屏幕开始拖动 .
我尝试通过手动触发touchmove事件来解决这个问题，但这不起作用 . 如果你下载代码（见上文）并在触摸设备上试试这个，你会明白我的意思 . 由于某种原因，拼图块突然跳到画布的左上角？并且还需要我再次触摸屏幕以使touchmouse事件开始触发 .
我真的希望这只是一个小问题，有人有一个非常聪明的工作 .
提前致谢！
1 回答
这个策略怎么样？尝试始终将第二个透明画布放在底部 . 当用户触摸/点击时，它们在顶部画布上而不是底部画布上进行，您只需立即从底部画布上擦除它并将其绘制到顶部画布中，然后让它们继续移动它？