Холст вращается от нижнего угла центра изображения?

Как вы поворачиваете изображение с помощью элемента html5 холста из нижнего центра?Холст вращается от нижнего угла центра изображения?

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

К сожалению, это похоже на то, чтобы повернуть его от верхнего левого угла изображения. Есть идеи?

Редактировать: в конце объект (космический корабль) должен вращаться как указатель часов, как если бы он поворачивал вправо/влево.

источник

2008-12-13 Tom

http://code.google.com/p/explorercanvas/ Это добавит вам большую поддержку кросс-браузер, это не то же самое, так как для IE вы на самом деле использовать VML – 2010-11-30 14:56:20

Смотрите также [Использование HTML5 Canvas для поворота изображения вокруг произвольной точки] (http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point) – Phrogz 2012-02-06 22:57:26

Сначала вы должны перевести на тот объект, вокруг которого вы хотите повернуть. В этом случае размеры изображения являются 64 х 120. Для того, чтобы вращаться вокруг нижнего центра вы хотите перевести 32, 120.

ctx.translate(32, 120);

Это приводит вас в центре нижней части изображения. Затем поверните полотно:

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

Который вращается на 90 градусов.

Затем, когда вы рисуете изображение, попробуйте следующее:

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

? Это работает?

источник

2008-12-13 16:51:04

Поистине удивительно: еще раз спасибо. Я думаю, что теперь я это чувствую. – Tom 2008-12-13 17:38:13

Правильный ответ - это, конечно же, Винсент.
я порылся немного с этим вращением/переводческой вещью, и я думаю, что мои маленькие эксперименты могли бы быть интересны, чтобы показать:

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

Моего спотыкаясь вопросом в том, что позиционирование повернутой фигуры трудно, потому что это по повернутому ось: либо мы должны сделать некоторую триго математику для рисования в примитивном происхождении, либо нам нужно нарисовать вторичный скрытый холст, а затем нарисовать его на целевом.
Если кто-то другой не имеет лучшей идеи?

источник

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>

источник

2009-01-07 23:04:03

Я использовал это, когда мне нужно было повернуть тексты, начатые с их указанной точки (в центре)?

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

источник

2013-04-04 18:40:38

Холст вращается от нижнего угла центра изображения?

ответ

Смежные вопросы