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

【问题标题】：How to rotate an image on the canvas and expand the parent so that the image is not cut away?如何在画布上旋转图像并展开父级以使图像不被切掉？
【发布时间】：2013-02-05 05:42:22
【问题描述】：

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

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

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

感谢任何帮助！

【问题讨论】：

标签： html html5-canvas image-rotation

【解决方案1】：

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

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

【讨论】：

嘿伙计太棒了...我会试试这个...！另外，我需要您知道这一点，我正在根据其父容器（如边界框）计算画布的样式尺寸，因为图像比容器大很多倍。这个事实会影响这个解决方案吗？
它仍在切割我的 Canvas 兄弟，因此丢失了图像边角！
这是一个 jsFiddle，展示了如何调整画布大小以允许固定大小的元素旋转 360 度而不会从画布中掉出.....jsfiddle.net/m1erickson/CuRan/4
老兄，我稍微调整了一下，它就可以工作了！在我的情况下，我们事先没有图像大小，因为图像是动态加载的，并且它们的大小被应用于画布。谢谢！
你的几何学有多好？我真的需要一些关于角位移的帮助。