Last active
September 16, 2016 21:28
-
-
Save rjohnson4444/44c39523d9f309634211 to your computer and use it in GitHub Desktop.
Omg, drawing!
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> | |
| <title>Smiley Face</title> | |
| </head> | |
| <body> | |
| <canvas id="a" width="800" height="800"> | |
| This text is displayed if your browser does not support HTML5 Canvas. | |
| </canvas> | |
| <script type='text/javascript'> | |
| // $ open index.html | |
| var a_canvas = document.getElementById("a"); | |
| var context = a_canvas.getContext("2d"); | |
| function drawFor(multiplier) { | |
| var radius = 350; | |
| var xOffset = 400; | |
| var yOffset = 400; | |
| context.beginPath(); | |
| for(var i=0; i<300; i++) { | |
| context.moveTo( | |
| xOffset + radius*Math.cos(i/300 * 2*Math.PI), | |
| yOffset + radius*Math.sin(i/300 * 2*Math.PI) | |
| ); | |
| context.lineTo( | |
| xOffset + radius*Math.cos((i*multiplier)/300 * 2*Math.PI), | |
| yOffset + radius*Math.sin((i*multiplier)/300 * 2*Math.PI) | |
| ); | |
| } | |
| context.stroke(); | |
| context.closePath(); | |
| } | |
| var multiplier = 1; | |
| function draw() { | |
| if(multiplier > 10) return; | |
| setTimeout(function() { | |
| multiplier += 0.01; | |
| context.clearRect(0, 0, 800, 800); | |
| drawFor(multiplier); | |
| draw(); | |
| }, 100); | |
| } | |
| draw(); | |
| // context.closePath(); | |
| // context.fillStyle = "yellow"; | |
| // context.beginPath(); | |
| // context.arc(95, 85, 40, 0, 2*Math.PI); | |
| // context.closePath(); | |
| // context.fill(); | |
| // context.lineWidth = 2; | |
| // context.stroke(); | |
| // context.fillStyle = "black"; | |
| // Draw the left eye | |
| // context.beginPath(); | |
| // context.arc(75, 75, 5, 0, 2*Math.PI); | |
| // context.closePath(); | |
| // context.fill(); | |
| // // Draw the right eye | |
| // context.beginPath(); | |
| // context.arc(114, 75, 5, 0, 2*Math.PI); | |
| // context.closePath(); | |
| // context.fill(); | |
| // Draw the mouth | |
| // context.beginPath(); | |
| // context.arc(95, 90, 26, Math.PI, 2*Math.PI, true); | |
| // context.closePath(); | |
| // context.fill(); | |
| // Write "Hello, World!" | |
| // context.font = "30px Garamond"; | |
| // context.fillText("Hello, World!",15,175); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment