缩放HTML画布

Question

我有一块画布：

<canvas id="canvas" width="400" height="400"/>

我希望能够使用javascript动态缩放，所以我想使用scale() 。 但这不起作用：

document.getElementById("canvas").getContext('2d').scale(2, 2);

画布仍为400x400，即使我希望为800x800。

使用vue在https://jsfiddle.net/c8sjpr37/3/上进行实时演示。 为什么不起作用？

Answer 1

scale命令是一个内部画布命令。 它改变绘制事物的比例。 例如：

 var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); ctx.strokeRect(5, 5, 25, 15); ctx.scale(2, 2); ctx.strokeRect(5, 5, 25, 15); 

 <div id="app"> <canvas id="canvas" width="400" height="400"/> </div> 

此代码段显示一个矩形，然后显示另一个矩形，该矩形的大小是第一个矩形的大小的两倍，并且是与平移点的距离的两倍，这是因为所有像素值都已使用.scale()命令加倍了。 我认为这不是您想要的。

不过，有一种方法可以编辑高度和宽度样式。 画布很挑剔，因此，如果更改一个，则另一个将更改以匹配初始比例，但是您可以使用以下方法进行操作：

document.getElementById("canvas").style.height = "800px";