Difference between revisions of "Team:Cologne-Duesseldorf/Test3"

Line 8: Line 8:
 
<script>
 
<script>
 
var canvas = document.getElementById("myCanvas");
 
var canvas = document.getElementById("myCanvas");
−
var ctx = canvas.getContext("2d");
+
var context= canvas.getContext("2d");
−
ctx.fillStyle = "#FF00FF";
+
context.fillStyle = "#FF00FF";
−
ctx.fillRect(0,0,150,75);
+
context.fillRect(0,0,150,75);
 +
 
 +
initialize();
 +
 
 +
  function initialize() {
 +
    window.addEventListener("resize", resizeCanvas, false);
 +
    window.requestAnimFrame = (function() {
 +
      return (
 +
        window.requestAnimationFrame ||
 +
        window.webkitRequestAnimationFrame ||
 +
        window.mozRequestAnimationFrame ||
 +
        window.oRequestAnimationFrame ||
 +
        window.msRequestAnimationFrame ||
 +
        function(callback) {
 +
          window.setTimeout(callback, 1000 / 60);
 +
        }
 +
      );
 +
    })();
 +
 
 +
    (function animloop() {
 +
      requestAnimFrame(animloop);
 +
      render();
 +
    })();
 +
 
 +
    resizeCanvas();
 +
  }
 +
 
 
</script>
 
</script>
 +
 +
 +
 +
 +
 +
 +
 +
 +
<!--
 +
(function() {
 +
  var particlesQuantity = 100,
 +
    velocity = 0.3,
 +
    maxRadius = 20;
 +
 +
  var canvas = document.getElementById("particlecanvas"),
 +
    context,
 +
    particles = [];
 +
 +
  if (canvas && canvas.getContext) {
 +
    context = canvas.getContext("2d");
 +
 +
    for (var i = 0; i < particlesQuantity; i++) {
 +
      var alpha = Math.random();
 +
 +
      particles.push({
 +
        x: Math.round(Math.random() * window.innerWidth),
 +
        y: Math.round(Math.random() * window.innerHeight),
 +
        velx: Math.random() * velocity * 2 - velocity,
 +
        vely: Math.random() * velocity * 2 - velocity,
 +
        radius: (1 - alpha) * maxRadius,
 +
        color: "rgba(" + [20, 147, 117, alpha].join(",") + ")"
 +
      });
 +
    }
 +
    initialize();
 +
  }
 +
 +
  function resizeCanvas() {
 +
    canvas.width = window.innerWidth;
 +
    canvas.height = window.innerHeight;
 +
  }
 +
 +
  function render() {
 +
    context.clearRect(0, 0, window.innerWidth, window.innerHeight);
 +
 +
    var particle, len = particles.length;
 +
 +
    for (var i = 0; i < len; i++) {
 +
      particle = particles[i];
 +
      if (particle.x < 0) {
 +
        particle.velx = velocity + Math.random();
 +
      } else if (particle.x > window.innerWidth) {
 +
        particle.velx = -velocity - Math.random();
 +
      }
 +
 +
      if (particle.y < 0) {
 +
        particle.vely = velocity + Math.random();
 +
      } else if (particle.y > window.innerHeight) {
 +
        particle.vely = -velocity - Math.random();
 +
      }
 +
      particle.x += particle.velx;
 +
      particle.y += particle.vely;
 +
 +
 +
      context.fillStyle = particle.color;
 +
      context.beginPath();
 +
      context.arc(
 +
        particle.x,
 +
        particle.y,
 +
        particle.radius,
 +
        0,
 +
        Math.PI * 2,
 +
        true
 +
      );
 +
      context.closePath();
 +
      context.fill();
 +
    }
 +
 +
    context.save();
 +
    context.restore();
 +
  }
 +
 +
  function distanceBetween(a, b) {
 +
    var dx = Math.pow(a.x - b.x, 2),
 +
      dy = Math.pow(a.y - b.y, 2);
 +
    return Math.sqrt(dx + dy);
 +
  }
 +
 +
  function initialize() {
 +
    window.addEventListener("resize", resizeCanvas, false);
 +
    window.requestAnimFrame = (function() {
 +
      return (
 +
        window.requestAnimationFrame ||
 +
        window.webkitRequestAnimationFrame ||
 +
        window.mozRequestAnimationFrame ||
 +
        window.oRequestAnimationFrame ||
 +
        window.msRequestAnimationFrame ||
 +
        function(callback) {
 +
          window.setTimeout(callback, 1000 / 60);
 +
        }
 +
      );
 +
    })();
 +
 +
    (function animloop() {
 +
      requestAnimFrame(animloop);
 +
      render();
 +
    })();
 +
 +
    resizeCanvas();
 +
  }
 +
})();
 +
-->
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 02:11, 1 November 2017

Your browser does not support the canvas element.