Question

如果图像为1024x1250且画布元素为600x800，我可以将图像绘制到画布中心，使得画布基本上是较大图像的较小视图端口。然后，我想允许该中心点移动，从而产生视口正在查看图像的不同部分的错觉。

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

Answer 1

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

然后，您只需要在（0,0）

处绘制图像

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

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