ShermanLab: eBusiness, Enterprise App
04/20/2018 Friday

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 Not For IE9
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.
Browser Issue:
This modified demo works for FireFox 22.0 and Chrome 28.0, but not IE 9, because I have set the first line of my php file to:
< !doctype html public "-//W3C//dtd html 4.0 transitional//EN" >
Please try The Cannon Animation works for IE 9 (it also works for FireFox ans Chrome)
Online Resource: W3 Schools: HTML5 Canvas

More to come, please visit us again!

Copyright © 2002-2016, Sherman Visual Lab