Html 在画布上放大和缩小

我使用HTML5画布元素编写了一个绘画应用程序

现在，我想给用户一个选项来放大和缩小，而绘画

---

我该怎么做呢？

有几种方法。这真的取决于你在找什么

您可以通过缩放整个上下文来实现，如在

ctx.scale（2,2）

中，然后以更大的比例重新绘制所有内容。绘制的一些东西，如路径和文本，将优雅地缩放。要做到这一点，你需要很好地跟踪到目前为止绘制的所有内容

另一种方法是将整个画布拉回到自己的位置。这需要一个临时画布，因为操作实际上是：绘制到临时画布，清除main，绘制回main

---

另一种方法是使用CSS变换仅缩放画布本身，这将使图像模糊（缩放！），但不需要更改画布上已有的任何像素。

您是如何实现绘制应用程序的？您可以使用哪些数据以更大或更小的缩放比例重新绘制画布？如果您只想将现有像素放大，然后使用CSS进行缩放。只想在每次转换（例如缩放）后添加该像素，则新情况为默认情况。我的意思是，在设置

（2，2）

后执行

ctx.scale（0.5，0.5）

实际上会执行

（2*0.5，2*0.5）

，因此将其设置为

（2，2）

，然后设置为

（0.5，0.5）

将不会使实际画布与最初相比变小，而是将其重置为以前的大小。