如何缩放画布绘图

Question

我试图放大或缩小我的画布图，但如果我只缩放上下文就没有任何事情发生。

我是否需要在比例尺之后重新绘制它？是否有任何方法可以直接缩放上下文而不会在每次尝试放大或缩小时绘制它？

PS ：我希望使用由脚本控制的HTML5 <input type="range">进行放大和缩小，并且已经有效了。

Answer 1

像迈克说的那样，最好的解决方案是重绘它。 放大css是一种解决方案，但质量会有很大的损失。

Answer 2

我正在从另一个question I already answered today复制我的答案..

Canvas就像一个图像。它有自己的物理尺寸，但仍然可以使用CSS进行缩放。使用width和height属性设置物理尺寸，然后使用CSS将其缩放为%至使其响应缩放。

示例...

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="width:100%;"></canvas>

以下是一个过于简化的示例：https://jsfiddle.net/43ejq0op/