I am trying to animate an arrow within a canvas using JQuery. The arrow is supposed to move around the canvas while rotating randomly but I am not sure how to do it. Does anyone knows how to do it?
Asked
Active
Viewed 271 times
0
-
jQuery is not a good driver of html5 Canvas. More appropriate is using JavaScript to call canvas context drawing & transformation commands. Animating an arrow is like animating anything on canvas: 1. Draw the shape, 2. Erase the canvas. 3. Redraw the shape in its new position & rotation. There are lots of good existing Stackoverflow Q&A showing how to move & rotate images & shapes on the canvas. – markE May 24 '16 at 04:17
-
1I am going to try as you have suggested, perhaps I could get it working. Thank you. – developer5Urban May 24 '16 at 06:48
-
[Here's](https://jsfiddle.net/oy1bmoeg/) example code for you to start with. – markE May 24 '16 at 23:05
-
@markE Thanks for the link, it's really helpful. Is it possible to direct the arrow in a given path within the canvas while as it bounce in a certain angle? – developer5Urban May 26 '16 at 01:11
-
Yes, Here is a [Q&A](http://stackoverflow.com/questions/25442709/draw-html5-javascript-canvas-path-in-time/25451821#25451821) showing how to navigate a path. – markE May 26 '16 at 02:50