Leinwand drehen, von unten in der Mitte Bildwinkel?

Wie Sie ein Bild drehen mit dem html5 canvas-element von der unteren Mitte Winkel?

<html>
    <head>
        <title>test</title>
        <script type="text/javascript">
            function startup() {
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
                var img = new Image();
                img.src = 'player.gif';
                img.onload = function() {
                    ctx.translate(185, 185);
                    ctx.rotate(90 * Math.PI / 180);
                    ctx.drawImage(img, 0, 0, 64, 120);
                }
            }
        </script>
    </head>
    <body onload='startup();'>
        <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
    </body>
</html>

Leider scheint dies, um es zu drehen, von der linken oberen Winkel des Bildes. Irgendeine Idee?

Edit: am Ende wird das Objekt (Raumschiff) sich zu drehen wie ein Uhrwerk Zeiger, als wenn es sich drehen rechts/Links.

code.google.com/p/explorercanvas Es wird Ihnen große cross-browser-Unterstützung, ist es nicht das gleiche, da für den IE, die Sie tatsächlich nutzen, VML
Siehe auch Verwendung von HTML5-Canvas-Drehung des Bildes Über Beliebigen Punkt

InformationsquelleAutor Tom | 2008-12-13

26

Erste, Sie haben zu übersetzen, um den Punkt, um den Sie möchten, zu drehen. In diesem Fall die Bild-Abmessungen sind 64 x 120. Zum drehen um die unten in der Mitte, die Sie übersetzen wollen, 32, 120.
```
ctx.translate(32, 120);
```
Bringt Sie zu der unten in der Mitte des Bildes. Dann drehen Sie die Leinwand:
```
ctx.rotate(90 * Math.PI/180);
```
Dem drehen um 90 Grad.

Dann, wenn Sie zeichnen das Bild dieses versuchen:
```
ctx.drawImage(img, -32, -120, 64, 120);
```
? Funktioniert das?

Wirklich erstaunlich: vielen Dank nochmal. Ich glaube, ich bin immer den Dreh jetzt.
Update: es gibt ein problem, obwohl, die linke Seite ist abgeschnitten erhalten wegen ot die Breite, denke ich. Irgendeiner Weise zu beheben, die aber trotzdem diese große Winkel?
Sieht aus wie ich es behoben, durch Einstellung der ctx.übersetzen(232, 120); - Einstellung Ihre Antwort als akzeptierte Antwort 🙂
können Sie bitte schauen Sie in stackoverflow.com/questions/17487277/.... vielen Dank:)

InformationsquelleAutor Vincent Ramdhanie

Die richtige Antwort ist, natürlich, Vincent.

Ich fummelte ein wenig mit dieser rotation/translation Ding, und ich denke, dass meine kleine Experimente interessant sein könnte, um zu zeigen:

<html>
  <head>
    <title>test</title>
    <script type="text/javascript">
    canvasW = canvasH = 800;
    imgW = imgH = 128;
    function startup() {
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      //Just to see what I do...
      ctx.strokeRect(0, 0, canvasW, canvasH);
      var img = new Image();
      img.src = 'player.png';
      img.onload = function() {
        //Just for reference
        ctx.drawImage(img, 0, 0, 128, 128);
        ctx.drawImage(img, canvasW/2 - imgW/2, canvasH/2 - imgH/2, 128, 128);
        mark(ctx, "red");
        //Keep current context (transformations)
        ctx.save();
        //Put bottom center at origin
        ctx.translate(imgW/2, imgH);
        //Rotate
        //Beware the next translations/positions are done along the rotated axis
        ctx.rotate(45 * Math.PI / 180);
        //Mark new origin
        mark(ctx, "red");
        //Restore position
        ctx.translate(-imgW/2, -imgH);
        ctx.drawImage(img, 0, 0, imgW, imgH);
        mark(ctx, "green");
        //Draw it an wanted position
        ctx.drawImage(img, canvasW/2, canvasH/3, imgW, imgH);
        //Move elsewhere:
        ctx.translate(canvasW/2, canvasH/2);
        ctx.drawImage(img, 0, 0, imgW, imgH);
        mark(ctx, "blue");
        ctx.restore();
      }
    }
    function mark(ctx, color) {
     ctx.save();
//~      ctx.fillStyle = color;
//~      ctx.fillRect(-2, -2, 4, 4);
     ctx.strokeStyle = color;
     ctx.strokeRect(0, 0, imgW, imgH);
     ctx.restore();
    }
    </script>
  </head>
  <body onload='startup();'>
    <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
  </body>
</html>

Mein stolpern Problem war, dass die Positionierung der gedrehten Figur ist schwer, denn es ist entlang der Achse gedreht: entweder haben wir einige trigo Mathematik, um Farbe an die primitive Herkunft, oder wir ziehen auf eine sekundäre versteckte Leinwand und dann malen Sie es auf das Ziel ein.

Es sei denn, jemand anderes hat eine bessere Idee?

InformationsquelleAutor PhiLho

Habe ich dieses, wenn ich brauchte, um zu drehen, Texte angefangen von Ihren angegebenen Punkt (in der Mitte)?

ctx.save(); 
ctx.translate(x,y);
ctx.rotate(degree*Math.PI/180);
ctx.translate(-x,-y);   
ctx.fillText(text,x,y); 
ctx.stroke();   
ctx.restore();

InformationsquelleAutor

-1

<html>
  <head>
    <title>Canvas Pinball flippers by stirfry</title>
    <script type="application/x-javascript">
     /*THIS SCRIPT ADAPTED BY STIRFRY. SOURCE TEETHGRINDER no warranty or liability implied or otherwise. use at your own risk. No credit required. Enjoy.stirfry.thank(you)*/
    var img = new Image();
                            //img.src = "flipper.gif";//right
    img.src="http://i39.tinypic.com/k1vq0x.gif"
    var img2 = new Image();
                             //img2.src = "flipper2.gif";//left
    img2.src ="http://i42.tinypic.com/14c8wht.gif"
    var gAngle = 0;
    gAngle = 60;
    stop = false;
    inertia = .8;
    vel = 10;
    k = 0.1;

    function drawagain(){
      gAngle = 60;
      stop = false;
      inertia = .8;
      vel = 10;
      k = 0.1;
     draw()
   }

   function draw(){
     var ctx = document.getElementById('canvas').getContext('2d');
     ctx.save();

        vel = ( vel * inertia ) + ( -gAngle * k );

        gAngle += vel;

        ctx.fillStyle = 'rgb(255,255,255)';
        ctx.fillRect (0, 0, 600, 600);

        ctx.translate(380, 480);              //location of the system
        ctx.rotate( gAngle * Math.PI / 180 );//rotate first then draw the flipper
        ctx.drawImage(img, -105, -16); 
ctx.restore();
ctx.save();
        ctx.translate(120, 480);              //location of the system
        ctx.rotate( -1*gAngle * Math.PI / 180 );//rotate first then draw the flipper
        ctx.drawImage(img2, -18, -16); 

ctx.restore();

        if( !stop )
          setTimeout(draw, 30);
      }

    </script>
    <style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
      canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; }
      pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
      .gameLayer {position: absolute; top: 0px; left: 0px;}
      #scoreLayer {font-family: arial; color: #FF0000; left: 10px; font-size: 70%; }
      #windowcontainer {position:relative; height:300px;}
    </style>
  </head>

  <body onload="draw()">
    <div id="windowcontainer">
      <canvas id="canvas" width="500" height="500"></canvas>
      <INPUT VALUE="flip" TYPE=BUTTON onClick="drawagain();"><br/>
    </div>

  </body>
</html>

Dein Beispiel enthält Fehler.

InformationsquelleAutor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.