Javascript html将整个画布旋转90度

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

有人有将整个画布旋转90度的示例代码吗

我接受了下面的anwser，但希望提供其他示例代码：

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
context.translate（canvas.width/2，canvas.height/2）
旋转（90*（Math.PI/180））；
context.beginPath（）；
context.rect（188-canvas.width/2,50-canvas.height/2200100）；
context.fillStyle='yellow'；
context.fill（）；
context.lineWidth=7；
context.strokeStyle='black'；
stroke（）；

您是否可以使用CSS通过

变换旋转
元素：旋转（90度）
 假设你的元素有“foo”。在JavaScript中，您可以执行以下操作：

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

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

在绘制画布之前，必须应用此旋转。不能旋转已绘制的任何对象

因此：

要旋转画布，
content.rotate（）
需要一个弧度值。因此，首先，让我们使用以下方法将度转换为弧度，使其变得简单：

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

您可能希望在旋转之前先平移画布，以便正确设置其原点

context.translate（context.width/2，context.height/2）

一旦我们知道我们想要什么值，我们只需在绘制任何东西之前旋转画布

请注意，在您的示例中，您绘制的矩形也在
context.rect（
X，Y，W，H）`的前两个参数中偏移

我发现将宽度设置为变量更容易，然后做简单的数学运算来自动重新定位长方体，注意现在它完全位于中心，并且旋转得很好

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

使用
getImageData
函数检索像素，以通常的方式操作它们，并使用
putImageData
显示结果。
您能提供一些示例代码吗？我猜是这样的？旋转后，它应该是垂直的，而不是水平的，并且仍然在画布的中心。请记住，您不能旋转画布上已经存在的任何图形。因此，首先使用context.clearRect（0,0，canvas.width，canvas.height）清除画布上的所有现有图形；然后，要旋转整个画布，需要执行context.rotate（90*Math.PI/180）；然后在画布上重新绘制你想要的一切，这些新的绘图将旋转90度。他为什么希望我希望实际的图像旋转，而不仅仅是通过旋转画布元素看起来旋转。图像将被保存。嗯。谢谢你迄今为止的帮助。这似乎是从左上角开始旋转的。有没有办法让旋转从中心开始？在旋转之前做context.translate（canvas.width/2，canvas.height/2）。嘿@user1308743，我已经为你编辑了我的小提琴。添加了一个翻译属性@user1308743我已经修复了小提琴，使它更干净、更快乐@Shannon Hochkins谢谢！这很有帮助。
function getRadianAngle(degreeValue) {
    return degreeValue * Math.PI / 180;
}