Question

旋转图像并调整画布大小。

        var img = document.getElementById("i");
        width = img.width;
        height = img.height;

        canvasH.width = width;
        canvasH.height = height;
        ctxH.clearRect(0, 0, width, height);
        ctxH.save();
        ctxH.translate(width / 2, height / 2);
        ctxH.rotate(90 * Math.PI / 180);
        ctxH.translate(-(width / 2), -(height / 2));
        ctxH.drawImage(img, 0, 0);
        ctxH.restore();

        var w = canvasH.width;
// Resize canvas to meet rotated image size
// Comment last two lines and see how image rotated
        canvasH.width = height;
        canvasH.height = w;

画布旋转（调整大小）但图像超出可见区域。

如何获得旋转图像？

FIDDLE：http://jsfiddle.net/ouh5845c/1/

Answer 1

重要的是要知道更改画布的宽度/高度会隐式清除画布。因此，无论您需要做什么都与调整画布大小相关，请在渲染之前执行。

这是一个三角测量正确的方法，适用于任何角度：

var img = document.getElementById("i"), angrad = angle * Math.PI /180, sin = Math.sin(angrad), cos = Math.cos(angrad); width = Math.abs(img.width*cos)+Math.abs(img.height*sin); height = Math.abs(img.height*cos)+Math.abs(img.width*sin); console.log(img.width,img.height,width,height); canvasH.width = width; canvasH.height = height; ctxH.clearRect(0, 0, width, height); ctxH.save(); ctxH.translate(width / 2, height / 2); ctxH.rotate(angrad); ctxH.translate(-img.width / 2, -img.height / 2); ctxH.drawImage(img, 0, 0); ctxH.restore();

http://jsfiddle.net/ouh5845c/5/

===========================

以及您可以忘记的以下故事：

现在，因为你需要旋转，宽度和高度在旋转之前和旋转之后被不同地解释。（当然，对于角度不是90度的＆＃34;毛茸茸的情况，一些三角函数会派上用场。）

我相信这个小提琴可以满足您的需求：

var img = document.getElementById("i"); width = img.width; height = img.height; canvasH.width = height; canvasH.height = width; ctxH.clearRect(0, 0, width, height); ctxH.save(); ctxH.translate(height / 2, width / 2); ctxH.rotate(90 * Math.PI / 180); ctxH.translate(-width / 2, -height / 2); ctxH.drawImage(img, 0, 0); ctxH.restore();

http://jsfiddle.net/ouh5845c/4/

Answer 2

如果您尝试将图像旋转90度，这应该可以。

var canvasH = document.getElementById("canvasH"),
        ctxH = canvasH.getContext("2d"),
        x = 0,
        y = 0,
        width = 0,
        height = 0,
        angle = 180,
        timeOut = null;

function loaded() {
        var img = document.getElementById("i");
        canvasH.width = img.height;
        canvasH.height = img.width;
        ctxH.clearRect(0, 0, img.width, img.height);
        ctxH.save();
        ctxH.translate(img.height, 0);
        ctxH.rotate(1.57079633);
        ctxH.drawImage(img, 0, 0);
        ctxH.restore();
}

jsFiddle

画布：使用＆＃39; canvas＆＃39;旋转图像

2 个答案: