如何在画布中让圆跟随路径?
我希望用户能够单击画布上的三个点,以在用户单击的每个位置形成两条带有三个圆圈的线段。当用户单击按钮时,用户单击的第一个圆圈处会显示一个红色圆圈,然后沿着用户绘制的路径移动。当它到达第二个圆圈并最终到达最后一个圆圈时,一旦到达这些点就会弹出某种形式的警报。
I want the user to be able to click three spots on the canvas to form two line segments with three circles for each place the user clicked. When the user clicks a button, a red circle shows up at the first circle the user clicked, then follows the path the user drew. As it reaches the 2nd circle and finally the last circle, some form of alert pops up once it reaches those points.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我不会为你做这一切。然而,这是一个起点
1) 确保您可以捕获画布中的鼠标事件。这个问题将帮助您开始 Html5 canvas 和 jquery
2)了解您正在编码的问题。您需要这样的数据结构:
3)每次用户单击时,更新
a
,然后更新b
,然后更新c
。当您到达c
时,使用三角学为正在绘制的线设置动画。这可以通过setTimeout
或setInterval
来完成I am not going to make all of this for you. However, here is a starting point
1) Make sure you can capture mouse events in the canvas. This question will get you started Html5 canvas and jquery
2) Understand the problem you are coding. You need a data structure like so:
3) Everytime the user clicks, update
a
, thenb
, thenc
. When you get toc
, use trigonometry to animate the line being drawn. This can be done withsetTimeout
orsetInterval