html5 - animating a shape created w/javascript/canvas -

-

i sort of new here , new javascript. trying learn how work javascript/html5/canvas. have been working way through several tutorials. have gone trough ones animating shape can not find 1 yet drawn shape reacts user input. mouse going on rectangle resulting in color change. or better this.

http://dan.forys.co.uk/experiments/mesmerizer/

can 1 point me tutorial achieve that? thank daniela

first clarify 1 thing, canvas doesn't know what's on it. can tell color pixel can't tell rectangle here or circle there. our purposed, consider canvas write-only. functionality exists in svg if want consider application, caveat canvas more universally supported.

knowing what's under mouse relates application is. in example posted, developer took x , y position mouse event (using jquery) , did quick math calculate row , column in. apply saying, "cell (x, y) moused over, when next redraw consider that."

canvas applications work following way:

  1. create environment entirely in javascript (with arrays, objects, etc).
  2. use rendering routine draw environment canvas.
  3. listen mouse events, timers, etc.
  4. check how event affects environment.
  5. apply changes environment.
  6. reuse rendering routine step 2 update canvas new environment.
  7. go step 3.

with in mind, tutorial should helpful, java, .net, android, etc. have own drawing surfaces , tutorials build on them.

in regards canvas, here's fun tutorial: http://billmill.org/static/canvastutorial/index.html

the tutorial builds breakout game listens mouse events , timer events. mouse event doesn't checking see over, timer event work check if ball exists in same space block or paddle , updates canvas , javascript environment accordingly.


Comments

Post a Comment

Popular posts from this blog

objective c - Change font of selected text in UITextView -

-
can suggest me how change font of selected text in uitextview.i cannot use uiwebview since have edit text. have seen pages app.how possible in app. see formatting text within uilabel differently . since need editing, should @ javascript-based editors such ckeditor or tinymce . highly recommend wwdc 2011 video session 511: "rich text editing in safari on ios."
Read more

php - Accessing POST data in Facebook cavas app -

-
so i've got simple form in canvas / iframe facebook app, , i'm trying pass along values post. reading on s.o. , fb's latest docs, understand it, data send via post form can accessed on receiving end $_request object. i read on thread on s.o. in order post forms work need pass along input named "signed_request" value current signed_request (i have signed request working ok otherwise...all login , authentication stuff working fine). isnt mentioned anywhere in official fb docs. so problem comes in $_request object signed request, , bunch of other session stuff. form inputs found. the way can read them set method of form "request" isn't real form method. takes of inputs , sends them args in url. horrible. here's sample page canvas app form i'm using try debug (leaving out authentication stuff): <form enctype="application/x-www-form-urlencoded" method="post" target="_top" id="my_form" action=...
Read more

c# - Getting control value when switching a view as part of a multiview -

-
i have following code in aspx page: <asp:button id="display_button" runat="server" text="display" onclick="button1_click" /> &nbsp; <asp:button id="edit_button" runat="server" text="edit" onclick="button2_click" /> &nbsp; <asp:button id="save_button" runat="server" text="save" onclick="button3_click" visible="false" /> &nbsp; <asp:multiview id="multiview1" runat="server" activeviewindex="0"> <asp:view id="view1" runat="server"> <asp:formview id="view_program" runat="server"> <itemtemplate> <%# eval("status").tostring().trim() %> </itemtemplate> </asp:formview> </asp:view> <asp:view id="view2" runat="server"> ...
Read more