4 ms·
Ask HN : Can this be done with HTML5 canvas?
Trying to simulate http://www.mathsisfun.com/geometry/images/triangle-acute-obtuse.swf with canvas using kinetic, any other lib suites this? I'm aware that this can be done, but not finding an easy way out....
- hardwaresofton 13y agodefinitely super doable with canvas. If I was to try and undertake this project, I would look into/befamilliar with 3 things: -Canvas (I mean BASIC canvas, use a framework, even) -KnockoutJS (for declarative binding and dom manipulation) Here's how I would go about it: 1. Get your webpage up and running (or use some IDE that will let you test) 2. Make a relatively small canvas element, and draw a triangle in it (so you'd have to set up the draw loop for the triangle I guess) 3. Find out and familiarize yourself with how to get at the vertices and actual points of the triangle 4. Use knockoutJS (make them observables, and print them somewhere on the page below the canvas as spans 5. Add math, make computed observables that do the calculations you need (sin/cos/etc) 6. At this point, you want to focus now, on making those vertices draggable (from here, you'll see just how easy/hard it is to make a dynamic one -- I suspect it won't be too hard with a good framework that redraws for you, worst comes to worst you could just redraw lines after detecting movement by dragging on the vertices) 7. At this point, all you need to work on is making it prettier -- look into CSS3 for neat overlay and positioning tricks It's super doable, maybe even easy (since the math is simple and the concept is relatively simple)
- init0 13y agoI had reached till 3. Thank for the amazing feedback, will try my best.
- hardwaresofton 13y agoOh didn't see this update, yeah man you're doing really well, I think it's going good, you've already got the element, and the triangle, now you just have to get it to update some dom element (or ideally, update some observable that has a DOM element somewhere -- knockoutjs style) -- and do some calculations! Awesome progress, I said it seemed easy, but everything gets complicated once you actually start doing it, good luck! BTW, JSFiddle is pretty amazing. lemme know if you get stuck, send me a PM or something and I'll help out!
- init0 13y agoSo far http://jsfiddle.net/Y9AtR/1/show/ http://jsfiddle.net/Y9AtR/1/show/ ;)