Javascript 我的形象不'；旋转时，请不要使用画布的整个宽度

因此，我在画布上玩耍，并尝试旋转从设备硬盘加载的图像，如下所示：

class imageEdits {
    constructor(canvas, imageSrc, canvasWidth, canvasHeight) {
        this.canvas = canvas;
        this.ctx = this.canvas.getContext("2d");
        this.image = new Image();
        this.image.src = imageSrc;
        this.cWidth = canvasWidth;
        this.cHeight = canvasHeight;
    }

    rotateImage = deg => {
        this.ctx.save();

        function degToRad(deg) {
            return (1 / 57.3) * deg;
        }

        let imageHeight = this.image.naturalHeight,
            imageWidth = this.image.naturalWidth;

        if (deg !== 0 && deg !== 180) {
            imageHeight = this.image.naturalWidth;
            imageWidth = this.image.naturalHeight;
        } else {
            (imageHeight = this.image.naturalHeight),
                (imageWidth = this.image.naturalWidth);
        }
        const {
            canvasStyle: { height, width, scale, aspectRatio },
        } = this.computeAspectRatio(imageHeight, imageWidth);
        console.log({ height, width, scale, aspectRatio });
        const halfWidth = width / 2;
        const halfHeight = height / 2;
        this.ctx.translate(halfWidth, halfHeight);

        this.ctx.rotate(degToRad(deg));
        this.canvas.style.transform = `scale3d(${scale}, ${scale}, 1)`;
        this.canvas.style.backgroundColor = "rgb(0,0,0)";
        this.canvas.style.transformOrigin = `top left`;
        console.log({ width, height });
        this.ctx.drawImage(this.image, -halfWidth, -halfHeight, width, height);

        this.ctx.restore();
    };

    computeAspectRatio = (imageHeight, imageWidth) => {
        const height = imageHeight;
        const width = imageWidth;

        (scale = 1), (canvasStyle = {});

        this.canvas.width = width;
        this.canvas.height = height;

        const scaleX = this.cWidth / width;
        const scaleY = this.cHeight / height;

        if (scaleX > scaleY) scale = scaleY;
        else scale = scaleX;

        canvasStyle = { height, width, scale };

        return { canvasStyle };
    };
}

代码的问题是，当我将图像旋转到其纵横比（90度180度）的反比时，图像会居中，而不采用画布的全宽或全高

这就是我的预期输出

但这是我得到的

---

请问有人知道我做错了什么吗？提前感谢：）

通常，围绕中心旋转是通过将上下文转换到画布的中点，旋转上下文，最后在水平方向上以图像宽度的负一半和垂直方向上以图像高度的负一半绘制图像来完成的

在您的例子中，让事情变得更困难的是，图像应该始终填充整个画布，同时保持正确的纵横比。要做到这一点，我们需要知道在给定角度下图像的确切宽度和高度，或者更准确地说，它的边界框。幸运的是，我们只需要处理四个角度，所以这只是一个在90°和270°之间交换宽度和高度的问题-就像你已经做的那样

现在我们知道了图像的尺寸，我们需要计算沿两个轴的比例，看看其中哪一个不超过相乘后的画布宽度和高度

然后，该比例用于缩放上下文，而不是用于调整画布本身大小的css比例

下面是一个基于您的代码的示例（只需单击“运行代码片段”）：

const canvas=document.getElementById（“编辑画布”）；
const ctx=canvas.getContext（“2d”）；
常量画布宽度=320；
常数画布高度=200；
设deg=0；
让形象；
canvas.width=画布宽度；
canvas.height=画布高度；
功能除雾器（度）{
返回（1/57.3）*度；
}
函数绘图（）{
let scale、imageHeight、imageWidth、scaleX、scaleY；
如果（度=0和度=180）{
imageHeight=image.width；
imageWidth=image.height；
}否则{
imageHeight=image.height；
imageWidth=image.width；
}
scaleX=画布宽度/图像宽度；
scaleY=画布高度/图像高度；
如果（imageWidth*scaleX欢迎来到Stackoverflow Prince Sule！我恐怕你的问题有点太模糊了。至少我没有真正理解你的问题是什么。你能给你的问题增添一点趣味吗？例如，你的预期输出的草图和/或你的代码的工作示例，包括清楚显示问题的图像“你有吗？我马上就做，谢谢你的回答：”我已经添加了一个链接到一个代码的JSFIDLE。没问题，王子-很高兴我能帮助！顺便说一下，如果你认为这是正确的答案，请考虑用嘀嗒按钮接受它。