_ ShermanLab: eBusiness, Enterprise App
03/28/2024 Thursday

eEducation, eBusiness & eArts

Home  |  Science Studio  |  eBusiness  |  Art Studio  |  Services  |  Contact Info  |  ~xmwang  
Enterprise App  |  eCommerce  |  Order  | 
HTML5 Canvas and JavaScript
The Modified Cannon Animation
.
For Laptop or Desktop
Mouse action: Move in the canvas to change cannon direction; Left-click to fire a ball.
Keyboad: Click "q" to stop and disable animation; Click "r" to restore animation.
No HTML5 Canvas detected!
For Mobile Devise (with touch screen)
Canvas touch: Hit a point in the canvas to change cannon direction and fire a ball.
Toggle button: Click "Disable" to stop and disable animation; Click "Restore" to restore animation.
Reference: Chapter 7, Super Charged JavaScript Graphics, O'Reilly (2011)
Original demo: Cannon simulation using vectors (works for FireFox 22.0, Chrome 28.0 and IE 9.0)
Modified JavaScript ( Code)
Keyboad contol: Added for Laptop/Desktop.
Toggle Button: Added for Tabulate/Smart Phone.
Cannon drowing: Looks better by using gradient colors.
Text display: Show angle, velocity and position by using context.fillText.
Ball trace: Looks better by using context.globalAlpha
Auto Control: Disable animation when windlow.onunload or window.onblur; Restore animation when window.onload or window.onfocus. One can see the change of the toggle button.
FireFox Browser Cache Issue:
When using FireFox 22.0, the animation may stop to work if you click browser "Relaod" button (or Ctr + F5).
The best solution is to click the "eBussiness" link and then select the animation page again. My Chrome 28.0 and IE 9 seem do not have this issue.
IE 9 Browser Doc-type Issue:
The modified demo works for FireFox 22.0, Chrome 28.0 and IE 9, if the doc type is set to:
< !DOCTYPE html > or < !doctype html public "-//W3C//dtd html 5.0 transitional//EN" >
But HTML 5 canvas will not work for IE 9, if the doc type is set to:
< !doctype html public "-//W3C//dtd html 4.0 transitional//EN" >
Please try The Cannon Animation Not For IE 9 (it still works for FireFox ans Chrome)
Online Resource: W3 Schools: HTML5 Canvas

More to come, please visit us again!

Copyright © 2002-2022, Sherman Visual Lab