使用JavaScript三角法缩放旋转图像以填充HTML5画布？

下面是我目前使用的代码。使用

0

旋转，图像将正确缩放以填充画布。（与背景大小类似：封面，除了在画布上使用JavaScript）

我正在尝试添加一个旋转功能，具有以下功能

旋转时保持图像居中。我尝试在

translate

中使用

width/2

，然后在

drawImage

中使用相反的方法，但正如您所看到的，图像没有保持居中。我不确定这是否与我之前的

x

和

y

居中代码冲突，或者这里是否需要三角法

自动进一步缩放图像以覆盖画布。这些是任意旋转，不是90度增量。我不想裁剪更多的图像来填充画布的角落。这是一个比我以前处理的更复杂的三角函数

我认为这可以通过

Math.sin

和

Math.cos

实现，但我已经很久没有使用它们了。我特别不确定如何实现#2。任何帮助都将不胜感激

var canvas=document.querySelector（'canvas'）
var context=canvas.getContext（'2d'）
var image=新映像（）
image.src=http://i.stack.imgur.com/7FsbT.jpg'
image.onload=函数（）{
var maxScaleX=canvas.width/image.width
var maxScaleY=canvas.height/image.height
scale=maxScaleX>maxScaleY？maxScaleX:maxScaleY
变量宽度=图像宽度*比例
变量高度=图像高度*比例
var x=（宽度-canvas.width）/-2
变量y=（高度-canvas.height）/-2
变量度=30
setTransform（1,0,0,1,0,0）//重置先前的平移和/或旋转
上下文。转换（宽度/2，高度/2）
上下文。旋转（度*Math.PI/180）
context.drawImage（图像，x-width/2，y-height/2，width，height）
}

以使其正常工作

我缩短了代码并简化了我的用例。您应该能够将

函数drawBestFit（）

包含到应用程序中，并使用它用任何加载的图像填充任何画布

为了更好地理解它是如何工作的，请查看-尤其是底部的演示片段

var canvas=document.querySelector（'canvas'）
var context=canvas.getContext（'2d'）
var image=新映像（）
image.src=http://i.stack.imgur.com/7FsbT.jpg'
image.onload=函数（）{
变量度=0
循环（）
函数循环（）{
度+=.5
drawBestFit（上下文，度*Math.PI/180，图像）
requestAnimationFrame（循环）
}
功能drawBestFit（ctx、角度、图像）{
var dist=Math.sqrt（Math.pow（canvas.width，2）+Math.pow（canvas.height，2））
var diagAngle=Math.asin（canvas.height/dist）
变量a1=（（角度%（Math.PI*2））+Math.PI*4）%（Math.PI*2）
if（a1>Math.PI）
a1-=Math.PI
如果（a1>Math.PI/2&&a1看到这个问题的答案。Blindman67做了很好的编码，你做了很好的重复。恭喜！下面是一个在视口中显示所有图像的示例。