Canvas旋转上下文后，如何在旋转图像的(0,0)坐标绘制矩形？

我来帮你梳理一下问题所在，然后给出调整方案~

首先看你的原代码，你先把坐标系原点平移到画布的右下角（ctx.translate(w, h)），接着旋转180度，然后绘制图像。这时候画布上的坐标系已经被变换了：当前的(0,0)点对应原画布的右下角，也就是旋转后图像的右下角。所以你在这个状态下画矩形，自然会出现在那里。

要让矩形画在旋转后图像的左上角（也就是视觉上的画布左上角），有两种简单的调整方式：

方法一：用save/restore恢复初始坐标系 #

这是最稳妥的方式，因为可以避免变换累积带来的混乱：

const ctx = canvas.getContext("2d") 
var image = new Image(); 
image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" 
image.onload = function() { 
  var maxsize = image.width; 
  var w = maxsize; 
  var ratio = (image.width / w);//1 
  var h = (image.height / ratio); 
  canvas.width = w; 
  canvas.height = h; 

  // 先保存初始的坐标系状态
  ctx.save(); 
  // 变换坐标系绘制旋转后的图像
  ctx.translate(w, h); 
  ctx.rotate(Math.PI); 
  ctx.drawImage(image,0,0,w,h); 
  // 恢复到初始坐标系（此时(0,0)就是画布左上角，也就是旋转后图像的左上角）
  ctx.restore(); 
  // 绘制矩形
  ctx.fillRect(0, 0, 150, 100); 
} 

原理很简单：save()会记录当前未做任何变换的坐标系，绘制完旋转图像后用restore()回到初始状态，此时画fillRect(0,0,...)就会精准落在旋转后图像的左上角。

方法二：调整坐标系平移 #

如果你不想用save/restore，也可以在绘制完图像后，把坐标系再平移回画布左上角：

const ctx = canvas.getContext("2d") 
var image = new Image(); 
image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" 
image.onload = function() { 
  var maxsize = image.width; 
  var w = maxsize; 
  var ratio = (image.width / w);//1 
  var h = (image.height / ratio); 
  canvas.width = w; 
  canvas.height = h; 

  ctx.translate(w, h); 
  ctx.rotate(Math.PI); 
  ctx.drawImage(image,0,0,w,h); 
  // 将坐标系从当前的(w,h)位置平移回(0,0)
  ctx.translate(-w, -h); 
  // 此时(0,0)对应旋转后图像的左上角
  ctx.fillRect(0, 0, 150, 100); 
} 

这种方式是通过反向平移抵消之前的变换，让当前坐标系的原点回到画布左上角。

两种方法都能达到你想要的效果，个人更推荐第一种，因为它的逻辑更清晰，后续如果还要做其他绘图操作，也不会受之前变换的影响。

内容的提问来源于stack exchange，提问作者rawat