javascript - 动态调整 Canvas 及其内容的大小

Question

我是 Javascript 的初学者，所以请耐心等待。

基本上，我正在使用 Javascript 为网站制作沙箱绘图工具。这是使用 Canvas 完成的。我需要做的是能够动态调整 Canvas 大小，但同时保持 Canvas 上的所有内容都可以缩放。

我认为以前没有人问过这个问题。这看起来微不足道，但我目前在 Canvas 上的所有对象都是以绝对坐标定义的。我还可以使用鼠标事件来绘制东西。当我想放大 Canvas 时(比如将尺寸加倍)。里面的所有对象都不会正确放大，鼠标坐标系也会困惑。

我能想到的唯一解决方案是为我的所有绘图部分添加比例因子，但这对于大量代码来说非常棘手。有更好的办法吗？

Answer 1

如果您不介意双倍尺寸 Canvas 上的锯齿，那么您可以简单地使用 CSS 将 Canvas 尺寸加倍。然后将每个传入的 mouseEvent 坐标除以 2。

如果您不想在双倍尺寸的 Canvas 上出现锯齿，那么:

• 将 Canvas 元素加倍:canvas.width*=2 和 canvas.height*=2 这会自动删除所有 Canvas 内容.
• 放大 Canvas :context.scale(2,2)
• 使用未更改的原始坐标重新绘制所有绘图部分。 一个令人高兴的提示:您不必缩放任何绘图坐标 - context.scale 会自动为您完成此操作。
• 将每个传入的 mouseEvent 坐标除以 2。