javascript - 如何翻译调整大小的画布？

Question

假设我正在将图像绘制到 Javascript 画布上。此外，该图像将在绘图操作期间调整大小，使其水平挤压。这是一些执行此操作的代码：

let dragger = document.querySelector(".dragger");

let canvas = document.querySelector(".my-canvas");
let ctx = canvas.getContext("2d");
  
var image = new Image();
image.crossOrigin = "Anonymous";
  
let newWidth = 600;
  
image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  
  dragger.style.left = 0;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height, 0, 0, newWidth, canvas.height);
}
  
image.src = "https://i.ibb.co/djqSKFW/sample.jpg";

.dragger {
  position: absolute;
  left: 0;
  top: 0;
}

<div class="dragger">
  <canvas class="my-canvas" width="1200" height="1200"></canvas>
</div>

这一切都工作正常，正如预期的那样。但是，现在假设您要翻译图像，以便裁剪前 200 个像素。如何做到这一点？

如果图像没有被调整大小很容易，因为您只需将第二个参数设置为drawImage然后200执行dragger.style.left = 200;（以便两个图像对齐），但是一旦引入图像必须保持其压扁宽度的附加约束，它似乎变得更加困难。

请注意，我希望将其绘制到画布上，而不是简单地将外部 div 裁剪为overflow: hidden. 具体来说，我正在寻找一种方法来绘制正确裁剪的拉伸图像版本。

编辑：作为演示当前不良行为的示例，我制作了一个小提琴，展示了裁剪在此处如何不起作用：https ://jsfiddle.net/604ykmt8/如果你看，你会注意到鸟是如何在这两个图像中都没有排列，即使它们应该。

标签： javascripthtmlcsshtml5-canvas

Answer 1

您需要根据比例因子缩放目标 X 偏移量；见下文，改编自您的 JSFiddle 以在同一画布上绘制两个图像，以便更清晰地进行比较。

let canvas = document.querySelector(".my-canvas");
let ctx = canvas.getContext("2d");

var image = new Image();
image.crossOrigin = "Anonymous";

let newWidth = 600;

function tick () {
  canvas.width = newWidth;
  canvas.height = image.height;
  const offset = 200 + Math.sin(+new Date() / 1000) * 200;
  const ratio = newWidth / image.width;
  ctx.drawImage(image, 0, 0, image.width, canvas.height, 0, 0, newWidth, canvas.height);
  ctx.globalAlpha = 0.8;
  ctx.drawImage(image, offset, 0, image.width, canvas.height, offset * ratio, 100, newWidth, canvas.height);
  requestAnimationFrame(tick);
};

image.src = "https://i.ibb.co/NNJPfG2/sample.jpg";
image.onload = tick;

<canvas class="my-canvas"></canvas>