|
|
| (4 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'>
| |
| - | <head>
| |
| - | <style>
| |
| - | body {
| |
| - | margin: 0px;
| |
| - | padding: 0px;
| |
| - | }
| |
| - | h1.title {
| |
| - | text-align:center;
| |
| - | }
| |
| - | img.rounded {
| |
| - | width: 50px;
| |
| - | height: 50px;
| |
| - | -webkit-border-radius: 25px;
| |
| - | -moz-border-radius: 25px;
| |
| - | border-radius: 25px;
| |
| - | }
| |
| - | #bioCanvas {
| |
| - | }
| |
| - | h1 {
| |
| - | font-family: 'Acme', sans-serif;
| |
| - | }
| |
| - | </style>
| |
| - | </head>
| |
| | | | |
| - | <script>
| |
| - | window.requestAnimFrame = (function(callback) { //sending all screen repaints to browser
| |
| - | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
| |
| - | function(callback) {
| |
| - | window.setTimeout(callback, 1000 / 60);
| |
| - | };
| |
| - | })();
| |
| - |
| |
| - | function drawRectangle(myRectangle, context) { //draws a rectangle
| |
| - | context.beginPath();
| |
| - | context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
| |
| - | context.fillStyle = '#8ED6FF';
| |
| - | context.fill();
| |
| - | context.lineWidth = myRectangle.borderWidth;
| |
| - | context.strokeStyle = 'black';
| |
| - | context.stroke();
| |
| - | }
| |
| - |
| |
| - | function drawCircle(myCircle, context) { //custom circle
| |
| - | context.beginPath(); //places pen down
| |
| - | context.arc(myCircle.x, myCircle.y, myCircle.radius, 0, 2*Math.PI); //draws arc
| |
| - | context.fillStyle = '#8ED6FF';
| |
| - | context.fill();
| |
| - | context.lineWidth = myCircle.borderWidth;
| |
| - | context.strokeStyle = 'black';
| |
| - | context.stroke();
| |
| - | }
| |
| - |
| |
| - | function animate(myCircle, canvas, context, startTime) {
| |
| - | // update
| |
| - | var time = (new Date()).getTime() - startTime;
| |
| - |
| |
| - | var linearSpeed = 200;
| |
| - | // pixels / second
| |
| - | var newX = linearSpeed * time / 1000;
| |
| - |
| |
| - | if(newX < canvas.width - myCircle.radius - myCircle.borderWidth / 2) {
| |
| - | myCircle.x = newX;
| |
| - | }
| |
| - |
| |
| - | // clear
| |
| - | context.clearRect(0, 0, canvas.width, canvas.height);
| |
| - |
| |
| - | drawCircle(myCircle, context);
| |
| - |
| |
| - | // request new frame
| |
| - | requestAnimFrame(function() {
| |
| - | animate(myCircle, canvas, context, startTime);
| |
| - | });
| |
| - | }
| |
| - | var canvas = document.getElementById('bioCanvas');
| |
| - | var context = canvas.getContext('2d');
| |
| - | context.canvas.width = window.innerWidth;
| |
| - | context.canvas.height = .9*window.innerHeight;
| |
| - | var myRectangle = {
| |
| - | x: 0,
| |
| - | y: 75,
| |
| - | width: 100,
| |
| - | height: 50,
| |
| - | borderWidth: 5
| |
| - | };
| |
| - |
| |
| - | var myCircle = {
| |
| - | x: 0,
| |
| - | y: 75,
| |
| - | radius: 50,
| |
| - | borderWidth: 5
| |
| - | };
| |
| - |
| |
| - | drawCircle(myCircle, context);
| |
| - |
| |
| - | // wait one second before starting animation
| |
| - | setTimeout(function() {
| |
| - | var startTime = (new Date()).getTime();
| |
| - | animate(myCircle, canvas, context, startTime);
| |
| - | }, 500);
| |
| - | </script>
| |
| - | </body>
| |
| - | </html>
| |
"
