La toile pivote-t-elle à partir de l'angle d'image du centre inférieur?

Comment faire pivoter une image avec l'élément canvas html5 à partir de l'angle inférieur central?La toile pivote-t-elle à partir de l'angle d'image du centre inférieur?

<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>

Malheureusement, cela semble le faire pivoter à partir de l'angle supérieur gauche de l'image. Une idée? Editer: à la fin, l'objet (vaisseau spatial) doit tourner comme un pointeur d'horloge, comme s'il tournait à droite/à gauche.

Source

2008-12-13 Tom

http://code.google.com/p/explorercanvas/ Il vous ajouter un grand soutien croix navigateur, il est pas la même chose puisque pour IE vous réellement utiliser VML –

Voir aussi [Utilisation HTML5 Canvas faire pivoter l'image à propos de point arbitraire] (http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point) – Phrogz

D'abord vous devez traduire au point autour duquel vous souhaitez faire pivoter. Dans ce cas, les dimensions de l'image sont 64 x 120. Pour tourner autour du centre en bas que vous voulez traduire à 32, 120.

ctx.translate(32, 120);

qui vous amène au centre en bas de l'image. Puis faites pivoter la toile:

ctx.rotate(90 * Math.PI/180);

Qui tourne de 90 degrés.

Puis, quand vous dessinez l'image, essayez ceci:

ctx.drawImage(img, -32, -120, 64, 120);

? Est-ce que ça marche?

Source

2008-12-13 16:51:04

Vraiment incroyable: merci encore. Je pense que je suis en train de le faire maintenant. – Tom

Mise à jour: il y a un problème cependant, le côté gauche est coupé en raison de la largeur je pense. Un moyen de résoudre ce problème, mais avez toujours ce grand angle? – Tom

On dirait que je l'ai corrigé en définissant ctx.translate (232, 120); - définir votre réponse comme réponse acceptée :) – Tom

La réponse correcte est, bien sûr, celle de Vincent.
Je fouilla un peu avec cette chose rotation/translation, et je pense que mes petites expériences pourrait être intéressant de montrer:

<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>

Ma question d'achoppement était que le positionnement de la figure pivotée est difficile, car il est le long de la rotation axe: soit nous devons faire quelques trigo maths pour peindre à l'origine primitive, soit nous devons dessiner sur une toile cachée secondaire et ensuite la peindre sur la cible.
À moins que quelqu'un d'autre ait une meilleure idée?

Source

2008-12-14 10:01:19 PhiLho

-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>

Source

2009-01-07 23:04:03

Votre exemple contient des erreurs. –

J'ai utilisé ceci, quand j'avais besoin de faire pivoter des textes commencés à partir de leur point spécifié (au centre)?

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();

Source

2013-04-04 18:40:38

La toile pivote-t-elle à partir de l'angle d'image du centre inférieur?

Répondre

Questions connexes