在 canvas 的中心应用缩放

Question

我需要对 javascript canvas 应用缩放，我使用以下代码行未能很好地完成：

ctx.scale(2,2) //doubles everything's size

显然不是缩放，而是将 canvas 及其所有元素的大小加倍。如果我让它像下图所示那样工作，我会同意的：

关于如何完成上图中描述的内容，我有什么想法吗？我没有使用任何外部库，因此很难做到这一点。谢谢

Answer 1

您可以使用 ctx.translate()

将上下文翻译成 canvas 大小的一半

编辑：

var zoomfactor = 2; //set whatever you want as zoom factor
ctx.transform(zoomfactor,0,0,zoomfactor,-(zoomfactor-1)*canvas.width/2,-(zoomfactor-1)*canvas.height/2)

在 canvas 的中心应用缩放

Apply zoom in center of the canvas

javascript

canvas

center

zooming