5

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

有没有人有示例代码将整个画布旋转 90 度？

我接受了下面的 anwser，但想提供额外的示例代码：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>
4

4 回答 4

3

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

所以：

要旋转画布，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/

于 2013-08-08T05:04:00.717 回答
2

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

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

// Rotates the canvas 90 degrees
context.rotate(90 * (Math.PI / 180));
于 2013-08-08T04:51:26.573 回答
1

你可以使用 CSS 来旋转<canvas>元素transform: rotate(90deg);吗？

于 2013-08-08T04:49:58.470 回答
0

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

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

于 2013-08-08T06:06:32.210 回答