Question

我的画布上有一个图像，我试图以一种不寻常的方式旋转它。我的图像旋转但是在错误的原点上。

我希望旋转图像，使椭圆显示为从其原点旋转而不是图像本身旋转。最终椭圆将在画布中静止并且只是旋转。

这是我目前的代码：

var canvas      = document.getElementById('canvas'),
    ctx         = canvas.getContext('2d');

var angle;
var toRads      = Math.PI/180;  
var start       = new Date().getTime();
var rotation    = 15;


function draw(){
    var x         = canvas.width/2 - img.width/2;
    var y         = canvas.height/2 - img.height/2;
    var deltaTime = new Date().getTime() - start;

        start     = new Date().getTime();
        angle     = (angle || 0) + (deltaTime/1000 * rotation);

    if(angle > 360){angle = 0;}

    ctx.clearRect(0,0,canvas.width,canvas.height);

        ctx.save();
        ctx.translate(x,y);
        ctx.rotate(angle * toRads);
        ctx.drawImage(img,20,20);
        ctx.restore();    

    setTimeout(draw,1);
}

我想知道这是否可以在2D中完成，还是只能通过3D等webGL来实现？

我创建了一个迄今为止我所拥有的jsfiddle： http://jsfiddle.net/hc0p5e06/

Answer 1

转换的顺序很重要。你错过了一个翻译，把圆圈的原点放在正确的位置（假设你想要中心）

   var w = img.width;  // get the image width and height
   var h = img.height;
   ctx.translate(x,y);
   ctx.rotate(angle * toRads);
   ctx.drawImage(img,0,0,w,h,-w/2,-h/2,w,h); // draw the image translated half
                                             // its size up and left in the new
                                             // coordinate space

画布旋转图像，描绘成角度的椭圆

1 个答案: