| 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. |
|
|
|
| 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 |
|
