你必须在画画布之前应用这个旋转。你不能旋转任何已经画好的东西。
因此：
要旋转画布，content.rotate()需要一个弧度值。因此，首先，让我们使用以下函数将Angular 转换为弧度：

function getRadianAngle(degreeValue) {
    return degreeValue * Math.PI / 180;
}

您可能希望在旋转之前先平移画布，以便正确设置其原点。
context.translate(context.width/2,context.height/2);
一旦我们知道我们想要什么值，我们只需要在画任何东西之前旋转画布!
请注意，在您的示例中，您绘制的矩形也在context.rect( X，Y，W，H）'的前两个参数中偏移。
我发现将宽度设置为变量更容易，然后通过简单的数学运算自动重新定位框，注意现在它完美地位于中心，并且旋转得很好!

• • 演示：**http://jsfiddle.net/shannonhochkins/VTyNF/6/

假设你的canvas元素有id“foo”，在JavaScript中你可以这样做：

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

// Rotates the canvas 90 degrees
context.rotate(90 * (Math.PI / 180));

你能用CSS把<canvas>元素旋转成transform: rotate(90deg);吗？

你可以通过处理像素数据轻松地将图像旋转90度，如果你的画布不是正方形的，你将不得不做出一些选择来决定什么是“正确的”答案。
使用getImageData函数检索像素，以常规方式处理它们，然后使用putImageData显示结果。

此版本不需要90度转弯的中心点：（对于新手来说不太容易，因为它是一个每个像素4个值的1d数组。

//...
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d', {willReadFrequently: true});
    const img = document.createElement('img');
    const file = inp.files[0]; // file from user input
    img.src = URL.createObjectURL(file);

    img.addEventListener('load', function () {
        canvas.width = this.width;
        canvas.height = this.height;
        canvas.crossOrigin = "anonymous";
    
        context.drawImage(img, 0, 0);
        rotateClockwiseBy90(canvas, context, img);
    }   
}

function rotateClockwiseBy90(canvas, context, img) {
    const width = canvas.width;
    const height = canvas.height;

    const imageData = context.getImageData(0, 0, width, height);
    const rotatedImageData = context.createImageData(height, width);

    //[redIndex, greenIndex, blueIndex, alphaIndex]
    const width4 = width * 4;
    const height4 = height * 4;

    for (let y = 0; y < height4; y += 4) {
        for (let x = 0; x < width4; x += 4) {
            rotatedImageData.data[x * height + (height4 - y - 1) - 3] = imageData.data[y * width + x];
            rotatedImageData.data[x * height + (height4 - y - 1) - 2] = imageData.data[y * width + x + 1];
            rotatedImageData.data[x * height + (height4 - y - 1) - 1] = imageData.data[y * width + x + 2];
            rotatedImageData.data[x * height + (height4 - y - 1)] = imageData.data[y * width + x + 3];
        }
    }

    const cw = canvas.width;
    canvas.width = canvas.height;
    canvas.height = cw;
    context.putImageData(rotatedImageData, 0, 0);
}

如果有人试图理解其中的逻辑：

rotatedImageData.data[x * height ...

应该是：

rotatedImageData.data[x / 4 * height * 4 ...

因为对于旋转后的数组，x表示行数，height表示行长，但是结果是相同的。
逆时针旋转版本：

for (let y = 0; y < height4; y += 4) {
    for (let x = 0; x < width4; x += 4) {
        rotatedImageData.data[(height4 * (width - x/4) - height4 + y)] = imageData.data[y * width + x];
        rotatedImageData.data[(height4 * (width - x/4) - height4 + y) + 1] = imageData.data[y * width + x + 1];
        rotatedImageData.data[(height4 * (width - x/4) - height4 + y) + 2] = imageData.data[y * width + x + 2];
        rotatedImageData.data[(height4 * (width - x/4) - height4 + y) + 3] = imageData.data[y * width + x + 3];
    }
}