html5-canvas - 更改 html5 Canvas 的 View "center"

Question

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

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

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看到很多关于上下文转换的例子。