更改 html5 画布的视图“中心”

Question

如果有一个 1024x1250 的图像和一个 600x800 的画布元素，我可以将图像绘制到画布居中，这样画布本质上就是较大图像的较小视口。然后我想让该中心点移动，从而产生视口正在查看图像的不同部分的错觉。

现在，我已经以一种粗俗的方式完成了这项工作，我将我想在画布上看到的图像部分重新绘制到画布上，但我觉得这不是最佳选择。有没有办法将整个图像渲染到画布上，然后以某种方式“转换”我当前的中心点，以便这种视图转移发生在幕后，希望在某个原生层中发生？

Answer 1

您可以在绘制任何图像之前向上下文添加转换（旋转、缩放、平移...）。您需要的是函数 context.translate(x,y)。

然后，你只需要在 (0,0) 处绘制你的图像

例如，显示图片的右下部分：

ctx.translate (-424, -450);
ctx.drawImage (image, 0, 0);

您可以查看此链接https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations 以查看很多有关上下文转换的示例。