Last active
August 29, 2015 14:20
-
-
Save tatocaster/42e4b5d2126c228fcd40 to your computer and use it in GitHub Desktop.
This file contains hidden or 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>Canvas</title> | |
| </head> | |
| <body> | |
| <canvas id="canvas" width="800" height="600"></canvas> | |
| <script type="text/javascript"> | |
| /** | |
| * @author tatocaster <tatocaster.me> | |
| */ | |
| 'use strict'; | |
| var canvas = document.getElementById("canvas"); | |
| var context = canvas.getContext("2d"); | |
| var centerX1 = 200; | |
| var centerY1 = 200; | |
| var centerX2 = 500; | |
| var centerY2 = 200; | |
| var radius = 100; | |
| draw2Circles(centerX1,centerY1,centerX2,centerY2); | |
| var iterator = 0; | |
| var interval = setInterval(function(){ | |
| iterator++; | |
| animateCircles(centerX1+iterator,centerX2-iterator); | |
| }, 60); | |
| function draw2Circles(centerX1,centerY1,centerX2,centerY2){ | |
| var mCenterX1 = centerX1; | |
| var mCenterX2 = centerX2; | |
| var mCenterY1 = centerY1; | |
| var mCenterY2 = centerY2; | |
| context.clearRect(0, 0, canvas.width, canvas.height); | |
| // ugly code for drawing 2 circles | |
| for(var i = 0; i <= radius; i++){ | |
| var newRadius = radius - i*2; | |
| if(newRadius < 0){ | |
| break; | |
| } | |
| context.strokeStyle = getRandomColor(); | |
| context.lineWidth = 1; | |
| context.beginPath(); | |
| context.arc(mCenterX1, mCenterY1, newRadius, 0, 2 * Math.PI, false); | |
| context.closePath(); | |
| context.stroke(); | |
| context.beginPath(); | |
| context.arc(mCenterX2, mCenterY2, newRadius, 0, 2 * Math.PI, false); | |
| context.closePath(); | |
| context.stroke(); | |
| } | |
| } | |
| function animateCircles(localCenterX1,localCenterX2){ | |
| var mCenterX1 = localCenterX1; | |
| var mCenterX2 = localCenterX2; | |
| if(mCenterX1 == mCenterX2){ | |
| clearInterval(interval); | |
| } | |
| draw2Circles(mCenterX1,centerY1,mCenterX2,centerY2); | |
| } | |
| function getRandomColor(){ | |
| // we can restrict letters and set warm colors and etc. | |
| var letters = '0123456789ABCDEF'.split(''); | |
| var color = '#'; | |
| for (var i = 0; i < 6; i++ ) { | |
| color += letters[Math.floor(Math.random() * 16)]; | |
| } | |
| return color; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment