Canvas Animationen

Bild um 90° drehen:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="158" height="158"></canvas>
    <script>
      var canvas = document.getElementById('box');
      var context = ctx = canvas.getContext('2d');
 
      var rotation = function(image){
        context.clearRect(0, 0, 300, 300);
 
        context.translate(canvas.width/2, canvas.height/2);
        context.rotate(90*Math.PI/180);
        context.translate(-(image.width/2), -(image.height/2));
 
        context.drawImage(image, 0, 0);
      };
 
      var cardImage = new Image();
      cardImage.src = 'images/card.png';
      cardImage.width = 114;
      cardImage.height = 158;
 
      cardImage.onload = function() {
        window.setTimeout(function() {
          rotation(cardImage);
        }, 100);
      };
    </script>
  </body>
</html>

Mit window.setInterval wird das Canvas gleich flippiger. 😉

Drehung eines Bildes um sich selbst:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="114" height="158"></canvas>
    <script>
      var canvas = document.getElementById('box');
      var context = ctx = canvas.getContext('2d');
 
      var rotation = function(image){
        context.clearRect(0, 0, 300, 300);
 
        context.translate(image.width/2, image.height/2);
        context.rotate(1*Math.PI/180);
        context.translate(-(image.width/2), -(image.height/2));
 
        context.drawImage(image, 0, 0);
      };
 
      var cardImage = new Image();
      cardImage.src = 'images/card.png';
      cardImage.width = 114;
      cardImage.height = 158;
 
      cardImage.onload = function() {
        window.setInterval(function() {
          rotation(cardImage);
        }, 100);
      };
    </script>
  </body>
</html>

Animation mit 60fps. SetInterval von 1000/60 = ~16,67ms und entspricht 60fps (https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/). Alle ~16,67ms wird 1 Grad gedreht, d.h. 360 Grad durch 60fps = 6 Sekunden für eine volle Drehung. Dieses Beispiel zieht im IE10 jedoch Schleifen:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="114" height="158"></canvas>
    <script>
      var canvas = document.getElementById('box');
      var context = ctx = canvas.getContext('2d');
 
      var rotation = function(image){
        context.clearRect(0, 0, 300, 300);
 
        context.translate(image.width/2, image.height/2);
        context.rotate(1*Math.PI/180);
        context.translate(-(image.width/2), -(image.height/2));
 
        context.drawImage(image, 0, 0);
      };
 
      var cardImage = new Image();
      cardImage.src = 'images/card.png';
      cardImage.width = 114;
      cardImage.height = 158;
 
      cardImage.onload = function() {
        window.setInterval(function() {
          rotation(cardImage);
        }, 1000/60);
      };
    </script>
  </body>
</html>

Request Animation Frame benutzen:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="114" height="158"></canvas>
    <script>
      var canvas = document.getElementById('box');
      var context = ctx = canvas.getContext('2d');
 
      var rotation = function(){
        context.clearRect(0, 0, 300, 300);
 
        context.translate(image.width/2, image.height/2);
        context.rotate(1*Math.PI/180);
        context.translate(-(image.width/2), -(image.height/2));
 
        context.drawImage(image, 0, 0);
        window.mozRequestAnimationFrame(rotation);
      };
 
      var image = new Image();
      image.src = 'images/card.png';
      image.width = 114;
      image.height = 158;
 
      image.onload = function() {
        window.mozRequestAnimationFrame(rotation);
      };
    </script>
  </body>
</html>

Cross-Browser-Request Animation Frame

Thanks to Paul Irish:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="114" height="158"></canvas>
    <script>
      window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
      })();
 
      var canvas = document.getElementById('box');
      var context = ctx = canvas.getContext('2d');
 
      var rotation = function(){
        context.clearRect(0, 0, 300, 300);
 
        context.translate(image.width/2, image.height/2);
        context.rotate(1*Math.PI/180);
        context.translate(-(image.width/2), -(image.height/2));
 
        context.drawImage(image, 0, 0);
        window.requestAnimFrame(rotation);
      };
 
      var image = new Image();
      image.src = 'images/card.png';
      image.width = 114;
      image.height = 158;
 
      image.onload = function() {
        window.requestAnimFrame(rotation);
      };
    </script>
  </body>
</html>

JavaScript Hoisting ausnutzen:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="114" height="158"></canvas>
    <script>
      var canvas = document.getElementById('box');
      var context = ctx = canvas.getContext('2d');
 
      var rotation = function(){
        context.clearRect(0, 0, image.width, image.height);
 
        context.translate(image.width/2, image.height/2);
        context.rotate(1*Math.PI/180);
        context.translate(-(image.width/2), -(image.height/2));
 
        context.drawImage(image, 0, 0);
      };
 
      var image = new Image();
      image.src = 'images/card.png';
      image.width = 114;
      image.height = 158;
 
      image.onload = function() {
        window.setInterval(function() {
          rotation();
        }, 1000/60);
      };
    </script>
  </body>
</html>

Rotate something in the middle of a canvas:

ctx.save();
ctx.translate( canvasRotationCenterX, canvasRotationCenterY );
ctx.rotate( rotationAmountInRadians );
ctx.translate( -objectRotationCenterX, -objectRotationCenterY );
ctx.drawImage( myImageOrCanvas, 0, 0 );
ctx.restore();

Rotate something around itself in the middle of a canvas:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="400" height="400"></canvas>
    <script>
      var canvas = document.getElementById('box');
      var context = ctx = canvas.getContext('2d');
      var angle = 0;
 
      var rotation = function(){
        context.clearRect(0, 0, canvas.width, canvas.height);
 
        context.save();
        context.translate(canvas.width/2, canvas.height/2);
        context.rotate(angle+=1*Math.PI/180);
        context.translate(-(image.width/2), -(image.height/2));
 
        context.drawImage(image, 0, 0);
        context.restore();
      };
 
      var image = new Image();
      image.src = 'images/card.png';
      image.width = 114;
      image.height = 158;
 
      image.onload = function() {
        window.setInterval(function() {
          rotation();
        }, 1000/60);
      };
    </script>
  </body>
</html>

Optimierte Variante:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="box" width="200" height="200"></canvas>
    <script>
      var canvas = document.getElementById('box');
    var context = ctx = canvas.getContext('2d');
    var angle = 0;
 
    var rotation = function(){
      context.clearRect(0, 0, canvas.width, canvas.height);
 
      context.save();
      context.translate(canvas.width/2, canvas.height/2);
      context.rotate(angle += Math.PI/180);
      context.translate(-(image.width/2), -(image.height/2));
 
      context.drawImage(image, 0, 0);
      context.restore();
    };
 
    var image = new Image();
    image.src = 'images/card.png';
    image.width = 114;
    image.height = 158;
 
    image.onload = function() {
      window.setInterval(function() {
        rotation();
      }, 1000/60);
    };
    </script>
  </body>
</html>

Das gleiche Beispiel mit CSS3:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS3-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      #box {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
 
        width: 200px;
        height: 200px;
 
        border: 1px solid black;
      }
 
      #card {
        display: inline-block;
 
        width: 114px;
        height: 158px;
 
        background-image: url('images/card.png');
 
        animation: rotate 6s linear infinite;
      }
 
      @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="card"></div>
    </div>
  </body>
</html>

Cross-Browser-CSS3

<!DOCTYPE html>
<html>
  <head>
    <title>CSS3-Rotation</title>
    <meta charset="UTF-8" />
    <style>
      #box {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
 
        width: 200px;
        height: 200px;
 
        border: 1px solid black;
      }
 
      #card {
        display: inline-block;
 
        width: 114px;
        height: 158px;
 
        background-image: url('images/card.png');
 
        animation: rotate 6s linear infinite;
        -webkit-animation: rotate 6s linear infinite;
      }
 
      @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
 
      @-webkit-keyframes rotate {
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
      }      
    </style>
  </head>
  <body>
    <div id="box">
      <div id="card"></div>
    </div>
  </body>
</html>

Dasselbe mit SVG (animateTransform wird vom IE nicht unterstützt -> http://msdn.microsoft.com/en-us/library/gg193979%28VS.85%29.aspx):

<!DOCTYPE html>
<html>
  <head>
    <title>SVG-Translation</title>
    <meta charset="UTF-8" />
    <style>
      #box {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <svg id="box" width="200" height="200">
        <image 
          width="114" 
          height="158" 
          x="43"
          y="21"
          xlink:href="images/card.png"
          >
        <animateTransform
          attributeName="transform" 
          repeatCount="indefinite"
          type="rotate"
          begin="0" 
          dur="6"
          from="0 100 100"
          to="360 100 100"
          />
        </image>
    </svg>
  </body>
</html>

Etwas kompplizierter aber auch mit SVG:

<!DOCTYPE html>
<html>
  <head>
    <title>SVG-Translation</title>
    <meta charset="UTF-8" />
    <style>
      #box {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <svg id="box" width="200" height="200">
    <svg width="114" height="158" 
         x="43" 
         y="21" 
         overflow="visible">
    <image 
      width="100%" 
      height="100%" 
      xlink:href="images/card.png"
      >
    <animateTransform
      attributeName="transform" 
      repeatCount="indefinite"
      type="rotate"
      begin="0" 
      dur="6"
      from="0 57 79"
      to="360 57 79"
      />
    </image>
    </svg>
    <!--    <image 
          width="114" 
          height="158" 
          xlink:href="images/card.png"
          >
        <animateTransform
          attributeName="transform" 
          repeatCount="indefinite"
          type="rotate"
          begin="0" 
          dur="6"
          from="0 100 100"
          to="360 100 100"
          />
        </image>-->
    </svg>
  </body>
</html>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.