Javascript 画布旋转+；缩放比例

我需要在画布中旋转图像，同时调整其大小，以确保画布的角不会保持为空。解决方案应该类似于“裁剪、调整大小和旋转”示例中的操作

我认为解决方法是将画布的旋转和调整大小功能结合起来，但我找不到任何具体的解决方案，也没有在web上找到任何示例

任何建议都会有帮助

---

谢谢

以下是一些可能对您有所帮助的代码。这显示了如何将图像顺时针旋转90度，然后将其缩放以适合原始画布空间

window.onload=function（）{
var img=document.getElementById（“myImage”）；
var rotatedCanvas=document.getElementById（“myRotatedCanvas”）；
变量宽度=rotatedCanvas.offsetWidth；
var高度=旋转画布。偏离视线；
//绘制原始图像
var ctx=document.getElementById（“myCanvas”）.getContext（“2d”）；
ctx.drawImage（img，0,0）；
//绘制旋转后的图像
ctx=rotatedCanvas.getContext（“2d”）；
ctx.旋转（90*Math.PI/180）；
//最后两个参数缩放图像
ctx.drawImage（img，0，-宽度，高度，宽度）；
};
img{
显示：无；
}
帆布{
边框：1px黑色实心；
}



我没有看过您给出的示例，但我给出了一个关于将旋转图像适配到画布上以避免出现空白的详细答案

有一些数学涉及（去图），但它只是基本的三角学，我提供了一个解释它是如何完成的。有两种解决方案，一种是查找适用于任何旋转的画布的最小比例，另一种是查找适用于特定旋转的画布的最小比例

假设图像居中，如果没有，可以通过提供抽象画布大小来调整提供的代码，从而使旋转图像居中于该抽象画布上

因此，如果您的图像中心位于
x=100
，
y=100
，画布为
canvasWidth=300
，
canvasWidth=300
，则只需使用
absCanvasWidth=（canvasWidth-x）*2的抽象大小
然后在
x=absCanvasWidth/2处的图像对高度执行相同的操作。这将适合旋转、平移的图像以填充画布

可以找到问题的代码答案
这似乎是一个非常好的解决方案，我要试试。角度在辐射中？如果我通过一个负角度，它也能工作吗？（我想是的，如果我正确理解了脚本，但要求确认）因为我的旋转必须是对图像的调整，所以我给usesr一个与原始图片成-45°到45°的范围。函数将接受以弧度表示的任何角度，直线
a1=（（角度%（Math.PI*2））+Math.PI*2）%（Math.PI*2）
将角度移动到范围（0-PI*2），即（0-360），其中
Math.PI*（7/4）
与-45度相同。在函数中进行数学运算之前，您需要在某个点转换为弧度。转换
radian=deg*（Math.PI/180）
或
radian=deg*0.01745329
，这对于画布来说已经足够精确了。很好。抱歉，如果我不接受这个答案，但在我停止那个项目的工作的那一刻，当我把它放在我的代码中并且它工作时（我对此毫不怀疑），我会接受这个答案。只是为了公平