javascript - 缩放 html Canvas

Question

我有一个 Canvas :

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

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

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

Canvas 保持在 400x400，即使我希望它是 800x800。

现场演示 https://jsfiddle.net/c8sjpr37/3/使用 View 。为什么它不起作用？

Answer 1

缩放命令是内部 Canvas 命令。它改变了绘制事物的比例。例如:

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() 加倍命令。我认为这不是您想要的。

不过，有一种方法可以编辑高度和宽度样式。 Canvas 很挑剔，所以如果你改变一个，另一个也会改变以匹配初始比例，但你可以用类似的东西来做到这一点:

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