Javascript 在画布中以一定角度绘制图像，而不旋转画布

我正在用JavaScript中的画布在HTML5中绘制一幅图像。我需要画一个旋转的角度。我知道这可以通过使用画布的上下文应用旋转（角度）函数来实现。但是我需要在不旋转画布本身的情况下执行此操作

---

如果可能的话，请建议可能的方法。

这是不可能的，您可能不需要它。试试这个：

context.save() // Save current state (includes transformations)
context.rotate()
... draw image ...
context.restore() // Restore state

---

在画布上应用变换时，不会旋转画布。你只要告诉我你要画的东西都会以特定的方式被改变。如果要避免转换影响其他命令，请使用

save（）

和

restore（）

方法。它们允许保存和恢复画布的设置

ctx.save();
ctx.rotate(30);
ctx.drawImage();
ctx.restore();

---

实际上，您可以将想要旋转的任何东西绘制到屏幕外画布中，然后将其绘制到主画布中。我从谷歌IO演讲中借用了以下代码：

rotateAndCache = function(image,angle) {
  var offscreenCanvas = document.createElement('canvas');
  var offscreenCtx = offscreenCanvas.getContext('2d');

  var size = Math.max(image.width, image.height);
  offscreenCanvas.width = size;
  offscreenCanvas.height = size;

  offscreenCtx.translate(size/2, size/2);
  offscreenCtx.rotate(angle + Math.PI/2);
  offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2));

  return offscreenCanvas;
}

然后将其缓存为：

rotobj = rotateAndCache(myimg,myangle)

在您的代码中：

mycontext.drawImage(rotobj,x_coord,y_coord)

这只在对象只旋转一次角度，并且随后只进行变换的情况下才有用。

我已经向上投票@PeterT——很棒的片段，效果很好——谢谢！我确实需要做3个小改动才能让它为我工作：

一,。宽度和高度的最大值是不够的：如果你想旋转一个正方形，你需要一个直径为正方形对角线的圆（

var diam

）。
二,。画布需要翻译回（或使用保存/还原）。
三,。必须根据画布大小调整对象x和y坐标。

因此，我最终得出以下结论：

    rotateAndCache = function(image,angle) {
        var offscreenCanvas = document.createElement('canvas');
        var offscreenCtx = offscreenCanvas.getContext('2d');

        var size = Math.max(image.width, image.height);
        var diam = 2*((size/2)*Math.sqrt(2));                 // needs to be saved
        offscreenCanvas.width = diam;
        offscreenCanvas.height = diam;

        offscreenCtx.translate(diam/2, diam/2);
        offscreenCtx.rotate(angle);
        offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2));
        offscreenCtx.translate(-diam/2, -diam/2);

        return offscreenCanvas;
}

和调整后的绘图位置（需要保存在

rotateAndCache

中）：

---

mycontext.drawImage（rotobj，x-（直径宽度）/2，y-（直径高度）/2）
谢谢彼得。这几乎符合我的要求。再次感谢。你有机会找到那篇演讲的链接吗？@Alexander，事实上我有：视频在那里，有没有类似的方法来缩放图像？@AinTohvri没有，“+”是正确的，它只是用来调整0指向右边的角度，而不是向上的角度。这通常很有用，在本例中是这样做的，因为它允许更容易地对准鼠标光标（采用atan2的直接结果）。是否有类似的方法缩放图像？是的，
缩放
而不是
旋转
。还有两个参数，水平和垂直缩放因子。有没有类似的方法来缩放图像？如果你想精确，你需要一个直径等于矩形对角线的圆，所以它应该是
var diam=Math.sqrt（image.width*image.width+image.height*image.height）max（image.width，image.height）
，不是吗？它可能会也可能不会比边长不等的矩形稍大（至少它不会小，所以不会引起错误）。