如何在画布上旋转图像并展开父级以使图像不被切除？

Question

如何在不丢失任何图像数据的情况下在HTML5 Canvas上旋转图像？我的意思是如果旋转导致图像尺寸增加，我也想扩展Canvas容器，这样图像就不会被切断。以下图片可能更好：

棕色的盒子实际上是包裹画布的容器。我想在旋转画布时展开它（以及Canvas以适合图像），这样图像就不会被切断。

更新 图像可能比Canvas大，因此我使用边界框方法来计算父容器的比例大小以适合图像。因此，Canvas的style维度将是计算的维度，而它的高度和宽度属性将是图像维度。

感谢任何帮助！

Answer 1

此功能将调整画布大小以完全适合旋转的图像。您必须提供图像的宽度和高度以及当前的旋转角度（以度为单位）。

[已编辑：OOPS！我应该将角度转换为弧度......并且......应该更改画布宽度/高度，而不是 css 宽度/高度]

function resizeCanvasContainer(w,h,a){
var newWidth,newHeight;
  var rads=a*Math.PI/180;
  var c = Math.cos(rads);
  var s = Math.sin(rads);

    if (s < 0) { s = -s; }
    if (c < 0) { c = -c; }
    newWidth = h * s + w * c;
    newHeight = h * c + w * s ;

var canvas = document.getElementById('canvas');
canvas.width = newWidth + 'px';
canvas.height = newHeight + 'px';
}