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

Question

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

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

更新： 图像可能比画布大，因此我使用边界框方法来计算与父容器成比例的大小以适合图像。所以画布的style尺寸将是计算出来的，而它的高度和宽度属性将是图像尺寸。

任何帮助表示赞赏！

Answer 1

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

[编辑：哎呀！我应该将角度转换为弧度......并且......应该更改画布宽度/高度，而不是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';
}