Question

我在JavaScript中使用canvas绘制HTML 5中的图像。我需要以旋转角度绘制它。我知道这可以通过使用画布的上下文应用旋转（角度）函数来完成。但我需要这样做而不旋转画布本身。

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

Answer 1

您实际上可以将任何想要旋转的内容绘制到屏幕外的画布上并将其绘制到主画布中。我从Google IO Talk中借用了这段代码：

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)

并在你的drawcode中：

mycontext.drawImage(rotobj,x_coord,y_coord)

仅当您的对象只旋转一个角度一次并且随后仅受到变换时，这才有用。

Answer 2

在画布上应用变换时，不要旋转画布。你只是告诉所有你将要画的将以特定的方式转变。如果您想避免转换以影响其他命令，请使用save()和restore()方法。它们允许保存和恢复画布的设置。

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

Answer 3

我赞成@ PeterT--伟大的片段并且运作良好 - 谢谢！我确实需要进行3次小改动才能让它适合我：

1。宽度和高度的最大值是不够的：如果你想要旋转一个正方形，你需要一个直径为正方形对角线的圆（var diam）。
2。画布需要翻译回来（或使用保存/恢复）。
3。必须根据画布大小调整对象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-(diam-width)/2,y-(diam-height)/2);

Answer 4

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

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

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

4 个答案: