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