Team:TAS Taipei/Templates/jsCanvas

From 2014hs.igem.org

(Difference between revisions)
m
m (cleared page)
 
(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>
 

Latest revision as of 07:00, 16 May 2014