Question

我正在尝试旋转填充矩形画布元素的图像。使用下面的代码，我可以令人满意地旋转它（90度增量）。然而，当大的一面转化为小的一面时，我无法弄清楚如何填充整个画布。相反，我有一个压缩的图像。在解决这个问题时，我们将不胜感激。谢谢！

到目前为止我所拥有的：

var degrees = 90;

function drawRotated(degrees){


    var canvas = document.getElementById('myCanvas');

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


    ctx.setTransform(1,0,0,1,0,0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    var translateX = (canvas.width)/2;
    var translateY = (canvas.height)/2;
    ctx.translate(translateX,translateY);
    ctx.rotate(degrees*Math.PI/180);
    ctx.translate(-translateX,-translateY);
    ctx.drawImage(theImage, 0,0, canvas.width, canvas.height);

}

Answer 1

要旋转图像而不扭曲图像，使用图像尺寸将图像转换为0, 0非常重要。这将使图像的中心到原点。你rotate原点周围的矩阵（0, 0）。 你围绕画布的中心旋转。

另外，您必须为一次翻译执行一些数学运算，以便图像始终位于左上角。

function drawRotated(degrees){
    var theImage = document.getElementById('image');
    var imageWidth = theImage.naturalWidth;
    var imageHeight = theImage.naturalHeight;

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

    var angle = degrees*Math.PI/180;

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

    // this will align your image in the upper left corner when rotating in 90deg increments
    ctx.translate(Math.abs(imageWidth/2 * Math.cos(angle) + imageHeight/2 * Math.sin(angle)), Math.abs(imageHeight/2 * Math.cos(angle) + imageWidth/2 * Math.sin(angle)));
    ctx.rotate(angle);
    ctx.translate(-imageWidth/2, -imageHeight/2);
    ctx.drawImage(theImage, 0, 0);
}

请参阅FIDDLE

旋转矩形画布图像以适合

1 个答案: