更改html5画布的视图"中心"

Question

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

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

Answer 1

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

然后,您只需要在(0,0)处绘制图像

例如,要显示图像的右下部分:

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