Last active
April 13, 2018 12:21
-
-
Save joshuamabina/b0e3c9cb5f3d57e0986f3b3dc33b48ea to your computer and use it in GitHub Desktop.
Gist file for "Explaining web workers" blog issue #4. https://github.com/joshuamabina/blog/issues/4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>My Medicine Ball</title> | |
| <style type="text/css" media="screen"> | |
| body { margin: 0; padding: 0; background: #fff; } | |
| canvas { background: #000; width: 100%; height: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="myCanvas"></canvas> | |
| <script charset="utf-8"> | |
| var canvas = document.getElementById("myCanvas"); | |
| var ctx = canvas.getContext("2d"); | |
| var ballRadius = 10; | |
| var x = canvas.width/2; | |
| var y = canvas.height/2; | |
| var dx = 2; | |
| var dy = -2; | |
| function drawBall() { | |
| ctx.beginPath(); | |
| ctx.arc(x, y, ballRadius, 0, Math.PI*2); | |
| ctx.fillStyle = "#fff"; | |
| ctx.fill(); | |
| ctx.closePath(); | |
| } | |
| function draw() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| drawBall(); | |
| if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { | |
| dx = -dx; | |
| } | |
| if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { | |
| dy = -dy; | |
| } | |
| x += dx; | |
| y += dy; | |
| } | |
| setInterval(draw, 10); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment