html 将整个 canvas 旋转 90 度

Question

我有一个图像绘制到 html 卡瓦。 我希望能够将图像旋转 90 度，但我似乎找不到关于如何旋转整个 canvas 图像的示例，只有 canvas 上的 object。

有没有人有将整个 canvas 旋转 90 度的示例代码？

我接受了下面的答案，但想提供额外的示例代码： http://jsfiddle.net/VTyNF/1/

<canvas id="myCanvas" width="578" height="200"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.translate(canvas.width/2,canvas.height/2) 
  context.rotate(90 * (Math.PI / 180));   
  context.beginPath();
  context.rect(188 - canvas.width/2, 50 - canvas.height/2, 200, 100);
  context.fillStyle = 'yellow';
  context.fill();
  context.lineWidth = 7;
  context.strokeStyle = 'black';
  context.stroke();
</script>

Answer 1

假设你的canvas元素有id “foo”。 在JavaScript中，您可以执行以下操作：

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

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

Answer 2

在绘制画布之前，必须应用此旋转。 您无法旋转已绘制的任何内容。

所以：

要旋转画布， content.rotate()需要一个以弧度表示的值。 首先，让我们通过使用以下方法将度数转换为弧度来简化：

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/

Answer 3

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

Answer 4

您可以通过操纵像素数据轻松地将图像旋转90度。 如果你的画布不是正方形，你将不得不做出一些关于“正确”答案的选择。

使用getImageData函数检索像素，以通常的方式操作它们，并使用putImageData显示结果。

Answer 5

此版本不需要 90 度旋转的中心点：（不那么容易，因为它是一个一维数组，每个像素有 4 个值， initialDimensions表示水平或 0、180 度旋转 state 与 90、270）

    //...
    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.initialDimensions = true;

    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) {
    if (img.initialDimensions == undefined) {
        img.initialDimensions = true;
    }

    var width, height;
    
    if (img.initialDimensions) {
        width = img.naturalWidth;
        height = img.naturalHeight;
        img.initialDimensions = false;
    }
    else {
        width = img.naturalHeight;
        height = img.naturalWidth;
        img.initialDimensions = true;
    }

    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];
    }
}