变换
如果您对如何进行变换不感兴趣，可以跳到底部找到解决问题的替代方法。所有内容都已注释说明，我猜测了一下您的需求。
如果您想了解我认为更简单的使用二维变换函数的方法，请继续阅读。
矩阵运算
当您通过画布2D API使用平移、缩放和旋转时，实际上是将现有矩阵与每个函数创建的矩阵相乘。
基本上当你执行
ctx.rotate(Math.PI); // rotate 180 deg
API 创建一个新的旋转矩阵并将其与现有矩阵相乘。
与普通数学乘法不同，矩阵乘法将根据您的乘法顺序更改结果。在普通数学乘法中，
A * B = B * A，但是对于矩阵，这种情况不成立
mA * mB != mB * mA（注意不等号）。
当您需要应用多个不同的变换时，这会变得更加复杂。
ctx.scale(2,2);
ctx.rotate(Math.PI/2);
ctx.translate(100,100);
不会得到相同的结果
ctx.scale(2,2);
ctx.translate(100,100);
ctx.rotate(Math.PI/2);
你需要应用转换的顺序取决于你想要实现的目标。使用API进行这种方式对于复杂的链接动画非常方便。不幸的是，如果你不了解矩阵数学，它也会成为无尽沮丧的来源。在某些情况下，它还会迫使许多人使用“save”和“restore”函数来恢复默认转换，这可能会对GPU性能造成很高的代价。
我们有福气了，因为2D API还有一个函数“ctx.setTransform(a, b, c, d, e, f)”，这就是你真正需要的一切。此函数将现有的变换替换为提供的变换。大部分文档都对“a,b,c,d,e,f”的含义含糊不清，但其中包含了旋转、缩放和平移。
该函数的一个方便用途是设置默认转换而不是使用save和restore。
我经常看到这种类型的东西。（参见下面进一步引用的示例1）
// transform for image 1
ctx.save(); // save state
ctx.scale(2,2);
ctx.rotate(Math.PI/2);
ctx.translate(100,100);
// draw the image
ctx.drawImage(img1, -img1.width / 2, -img1.height / 2);
ctx.restore(); // restore saved state
// transform for image 2
ctx.save(); // save state agian
ctx.scale(1,1);
ctx.rotate(Math.PI);
ctx.translate(100,100);
// draw the image
ctx.drawImage(img2, -img2.width / 2, -img2.height / 2);
ctx.restore(); // restore saved state
一种更简单的方法是只需删除保存和还原，并通过将其设置为恒等矩阵来手动重置变换。
ctx.scale(2,2);
ctx.rotate(Math.PI/2);
ctx.translate(100,100);
// draw the image
ctx.drawImage(img1, -img1.width / 2, -img1.height / 2);
ctx.setTransform(1,0,0,1,0,0); // restore default transform
// transform for image 2
ctx.scale(1,1);
ctx.rotate(Math.PI);
ctx.translate(100,100);
// draw the image
ctx.drawImage(img2, -img2.width / 2, -img2.height / 2);
ctx.setTransform(1,0,0,1,0,0); // restore default transform
现在我相信您仍然想知道传递给setTransform的这些数字是什么意思？
最简单的方法是将它们视为2个向量和1个坐标。这两个向量描述了单个像素的方向和比例，坐标仅仅是原点（绘制在画布上0,0位置的位置）的x,y像素位置。
一个像素有两个轴，X轴和Y轴。为了描述每个轴，我们需要两个数字（一个向量），这些数字描述了像素顶部和左侧的屏幕（未变换）方向和比例。因此，对于与屏幕像素匹配的普通像素，X轴从左到右横跨顶部，并且长度为一个像素。向量是（1,0）一个像素横跨，没有像素下降。对于沿着屏幕向下的Y轴，向量是（0,1）没有像素横跨，向下一个像素。原点是位于坐标（0,0）的屏幕顶部右侧像素。
因此，我们得到了恒等矩阵，这是2D API（以及许多其他API）的默认矩阵。X轴（1,0），Y轴（0,1）和原点（0,0）与setTransform（1,0,0,1,0,0）的六个参数相匹配。
现在假设我们想放大像素。我们所要做的就是增加X和Y轴的大小，setTransform（2,0,0,2,0,0）与scale（2,2）（从默认变换）相同。我们的像素顶部现在横跨两个像素，向左侧延伸两个像素。缩小setTransform（0.5,0,0,0.5,0,0），我们的像素现在横跨半个像素并向下半个像素。
这两个轴向量（a,b）和（c,d）可以指向任何方向，完全独立于彼此，它们不必相互垂直，因此可以扭曲像素，也不需要它们具有相同的长度，因此可以更改像素宽高比。原点也是独立的，只是画布原点的绝对坐标，并且可以设置在画布上或离画布任何位置。
现在假设我们要将变换顺时针旋转90度，同时将两个轴放大2倍，并将原点放置于画布中心位置。我们希望像素的X轴（顶部）长度为2个像素，并指向屏幕下方。该向量是(
0,2)即横坐标为0，纵坐标为2。我们希望像素的左侧长度为2，指向屏幕左边(
-2,0) 即横坐标为负2，纵坐标为0。而且，将原点放置于画布中心位置是(
canvas.width / 2, canvas.height / 2)。最终矩阵为
setTransform(0,2,-2,0,canvas.width / 2, canvas.height / 2)。
逆时针旋转的方法是
setTransform(0,-2,2,0,canvas.width / 2, canvas.height / 2)。
容易发现，将向量交换并改变符号就可以将向量顺时针旋转90度。
- 向量(
x,y)顺时针旋转90度后为(-y,x)。
- 向量(
x,y)逆时针旋转90度后为(y,-x)。
对于顺时针旋转，交换x和y并取y的相反数；对于逆时针旋转，交换x和y并取x的相反数。
对于180度旋转，可以从0度开始，使用向量(
1,0)。
// input vector
var x = 1;
var y = 0;
// rotated vector
var rx90 = -y; // swap y to x and make it negative
var ry90 = x; // x to y as is
// rotate again same thing
var rx180 = -ry90;
var rx180 = rx90;
// Now for 270
var rx270 = -ry180; // swap y to x and make it negative
var rx270 = rx180;
或者只用x和y来表示
- 0度 (
x,y)
- 90度 (
-y,x)
- 180度 (
-x,-y)
- 270度 (
y,-x)
- 然后回到360度 (
x,y)。
这是向量的一个非常方便的属性，我们可以利用它来简化我们的变换矩阵的创建。在大多数情况下，我们不想扭曲我们的图像，因此我们知道Y轴始终比X轴顺时针旋转90度。现在我们只需要描述X轴，通过将90度旋转应用于该向量，我们就有了Y轴。
因此，变量x和y是我们像素顶部（X轴）的比例和方向，ox，oy是画布上原点的位置（平移）。
var x = 1; // one pixel across
var y = 0; // none down
var ox = canvas.width / 2; // center of canvas
var oy = canvas.height / 2;
现在创建转换的方法是：
ctx.setTransform(x, y, -y, x, ox, oy);
请注意，Y轴与X轴垂直90度。
正弦和单位向量
当轴线与顶部和侧面对齐时，一切都很好，但如果轴线以任意角度对齐，比如由
ctx.rotate(angle)提供的参数，那么我们该如何获得矢量呢？这就需要用到一点三角函数了。Math函数
Math.cos(angle)返回角度的X分量，angle和
Math.sin(angle)给出Y分量。对于0度，
cos(0) = 1，
sin(0) = 0，对于90度（
Math.PI/2弧度），
cos(PI/2) = 0，
sin(PI/2) = 1。
使用sin和cos的好处在于，我们得到的两个数字总是给出长度为1个单位（像素）的矢量（这称为标准化矢量或单位向量）。因此，cos(a)
2 + sin(a)
2 = 1。
这为什么很重要？因为它使缩放变得非常容易。假设我们总是保持长宽比相等，那么我们只需要一个数来进行缩放。要缩放一个向量，只需将其乘以比例即可。
var scale = 2; // scale of 2
var ang = Math.random() * 100; // any random angle
var x = Math.cos(ang); // get the x axis as a unit vector.
var y = Math.sin(ang);
// scale the axis
x *= scale;
y *= scale;
向量 x,y 现在长度为两个单位。
比使用保存、恢复、旋转、缩放、平移等更好 :(
现在将它们组合起来，创建一个具有任意旋转、缩放和平移（原点）的矩阵。
// ctx is the 2D context,
// originX, and originY is the origin, same as ctx.translate(originX,originY)
// rotation is the angle in radians same as ctx.rotate(rotation)
// scale is the scale of x and y axis same as ctx.scale(scale,scale)
function createTransform(ctx,originX,originY,rotation,scale){
var x, y;
x = Math.cos(rotation) * scale;
y = Math.sin(rotation) * scale;
ctx.setTransform(x, y, -y, x, originX, originY);
}
现在将其应用于上述给出的
示例（1）
createMatrix(ctx, 100, 100, Math.PI/2, 2)
ctx.drawImage(img1, -img1.width / 2, -img1.height / 2);
createMatrix(ctx, 100, 100, Math.PI/2, 2)
ctx.drawImage(img2, -img2.width / 2, -img2.height / 2);
这就是如何使用setTransform来简化canvas的转换，而不是猜测、试错、缩放、旋转和来回平移，在一堆保存和还原中。
使用它可以简化您的代码。
答案
现在让我们来看你的问题。
我不完全确定你想要什么，我猜想你不介意缩放画布来适应图像，图像始终位于中心，并且长宽比保持不变。由于旋转与屏幕对齐，因此我将手动设置转换。
const MAX_SIZE_WIDTH = 640;
const MAX_SIZE_HEIGHT = 480;
orientationData = [];
orientationData[6] = Math.PI/2; // xAxis pointing down
orientationData[8] = -Math.PI/2; // xAxis pointing up
orientationData[3] = Math.PI;
var orient,w,h,iw,ih,scale,ax,ay;
iw = image.width;
ih = image.height;
if(orientation != 1){
var orient = orientationData[orientation];
if(orient === undefined){
return;
}
if(orientation === 6 || orientation === 8){
scale = Math.min(1,
MAX_SIZE_WIDTH / ih,
MAX_SIZE_HEIGHT / iw
);
w = canvas.width = scale * ih;
h = canvas.height = scale * iw;
}else{
scale = Math.min(1,
MAX_SIZE_WIDTH / iw,
MAX_SIZE_HEIGHT / ih
);
h = canvas.height = scale * ih;
w = canvas.width = scale * iw;
}
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, w, h);
ax = Math.cos(orient) * scale;
ay = Math.sin(orient) * scale;
ctx.setTransform(ax, ay, -ay, ax, w / 2, h / 2);
ctx.drawImage(image,-iw / 2, -ih / 2);
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
