0

I'm new to ocanvas and I'm finding it is not well-documented for beginners. I would like to know how to limit animations, such as when clicked, a box will move -350 to it's own position but stop at the edge of the canvas if it is closer than it's position - 350. Any help or tutorials would be greatly appreciated.

Jeff
  • 19
  • 1
  • 1
  • 6

1 Answers1

0

Is Ocanvas a library? You only tagged canvas but mentioned Ocanvas... as for regular canvas, it's well documented here http://www.w3schools.com/html/html5_canvas.asp If you are trying to animate it, you have to think in terms of making a repeating loop (eg. setInterval() ) and updating the position of an object pixel by pixel. Here's a website on how to animate an object in canvas: http://codular.com/animation-with-html5-canvas

EDIT

as for ocanvas it looks like their pretty well documented on their website http://ocanvas.org/docs/Animation

Here's an example with the loop, only this one is using rotation, so you could use whatever properties you want http://ocanvas.org/docs/Timeline/setLoop

You could use your own custom logic in the setLoop() function in order to limit or move the object based on your requirements (e.g. if (object.x < whatever) object.x++;)

Micaiah Wallace
  • 1,101
  • 10
  • 17
  • thanks very much for your answer, I have seen the first link, but was a little confused by it. Like I said I'm newish to javascript and ocanvas. I was using this:box.stop().animate({ rotation: 0, x: box.x - 250, y: box.y - 250 }); – Jeff May 14 '15 at 14:55
  • ocanvas, I tried to tag ocanvas but stack overflow wouldn't let me create a new tag cause I'm a noob – Jeff May 14 '15 at 14:58
  • If you are wanting to restrict the animation I would suggest using the setLoop() function so you can manually animate it and stop it when you need to – Micaiah Wallace May 14 '15 at 14:59
  • that's a fair thing to suggest, but the animate function has many additional details I'd like to use such as easing, timing, and fading – Jeff May 14 '15 at 15:00
  • Then use your animate function, but then in setLoop() you can constantly check the position of the box to see if it's less than 0 (edge of canvas) then call box.stop() if it is – Micaiah Wallace May 14 '15 at 15:01
  • holy crap, setloop is all I was missing, it works perfectly now! thank you! I guess I just need to wrap my head around the inner workings of ocanvas, which is what I'm having trouble with. thanks again friend! – Jeff May 14 '15 at 15:05
  • No problem, if I answered your question, check the little check box next to my question to mark it as the answer, thanks! – Micaiah Wallace May 14 '15 at 15:11
  • so may I ask why the setloop is needed? I thought that if you're calling the function in the body it's already refreshing rapidly – Jeff May 14 '15 at 15:35
  • if you are using `setInterval(function(){}, 1)` in theory it should work the same, but I don't know how ocanvas works internally, so maybe there is another cause. I just jumped to the docs and saw that function and what it did, I've never used it or ocanvas myself. – Micaiah Wallace May 14 '15 at 15:38