Untitled

<html>
<head>
<title>Dings</title>
<style type="text/css">
div
{
position:absolute;
left:300px;
}
</style>
</head>
<body>

<div><canvas id="1" width="1100" height="1100"></canvas></div>
<div><canvas id="2" width="1100" height="1100"></canvas></div>
<div><canvas id="3" width="1100" height="1100"></canvas></div>
<script>
  var canvas1 = document.getElementById("1");
  var context1 = canvas1.getContext("2d");
  var img1 = new Image();
  img1.src = "rot.jpg";
  img1.onload = function() {
    for (var x = 0; x < 120; x += 1) {                          //Winkel 120°
    context1.drawImage(img1, 0, 0, 500, 9, 0, 0, 300, 20);
    context1.rotate(<?php echo deg2rad(1); ?>);                 //Jeweils pro Durchlauf um 1° drehen
    }
  };
  context1.translate(500,500);                                  //Auf 500/500 schieben
  context1.rotate(<?php echo deg2rad(0); ?>);                   //Am Anfang um 0° drehen
</script>

<script>
  var canvas2 = document.getElementById("2");                   //get content vom 2. canvas
  var context2 = canvas2.getContext("2d");                      //context vom 2. setzen
  var img2 = new Image();                                       //img2 anlegen
  img2.src = "blau.jpg";
  img2.onload = function() {
    for (var x = 0; x < 80; x += 1) {                           //um 80° drehen
    context2.drawImage(img2, 0, 0, 500, 9, 0, 0, 300, 9);       //das org. 500x9 große bild auf 300x9 strecken
    context2.rotate(<?php echo deg2rad(1); ?>);                 //immer um 1 grad drehen
    }
  };
  context2.translate(500,500);                                  //auf 500/500 setzen
  context2.rotate(<?php echo deg2rad(120); ?>);                 //um so viel drehen, wie es beim ersten Durchlauf gedreht wurde
</script>

<script>
  var canvas3 = document.getElementById('3');
  var context3 = canvas3.getContext('2d');
  var img3 = new Image();
  img3.src = 'gruen.jpg';
  img3.onload = function() {
    for (var x = 0; x < 160; x += 1) {
    context3.drawImage(img3, 0, 0, 500, 9, 0, 0, 300, 9);
    context3.rotate(<?php echo deg2rad(1); ?>);
    }
  };
  context3.translate(500,500);
  context3.rotate(<?php echo deg2rad(200); ?>);                 //um so viel drehen wie es bei alle Durchläufen zuvor gedreht wurde
</script>

</body>
</html>