javascript - 在窗口调整大小时动态调整 Canvas 大小

Question

当用户调整浏览器窗口的大小时，我正在尝试调整 Canvas 图表的大小。直接更改它的问题，或者我发现......是图像在调整大小期间消失了。这里有一些截图可以帮助你理解我的问题。
这是调整大小之前的图表。

这是调整大小时的图表。 (不针对 DOM 元素)

我发现图表在右侧溢出。

正在调整大小并以 Canvas 宽度为目标的图表。

如您所见，图表消失了。

    let canvas = document.getElementById('canvas');
    this.canvas.width = ${
      event.target.innerWidth - (window.innerWidth / 100) * 2
    };

请让我知道动态调整 Canvas 图表大小的选项。谢谢!
附言我正在为这个特定元素使用 AngularJs。
2020 年 12 月 30 日更新
发现图表消失的明显原因是 Canvas 基于源自设定高度/宽度的坐标。因此，解决方案是在 Canvas 调整大小时重新映射笔触/填充。
新的挑战:

使用 clearRect (0, 0, width, height) 不会清除 Canvas 。重新映射会导致图表在彼此之上的无限映射。如下图所示。

Answer 1

这是我得到一百万美元的解决方案吗？不是，但...
经过数小时的思考，为什么创作者从来没有为调整 Canvas 大小制定一个简单的解决方案，我终于找到了一个可以调整图表大小的选项。请注意，如果您要扩大规模，它可能会变得像素化。但是这个选项将工作 .
而不是使用内联属性定义高度和宽度:

<canvas id="canvas" height="200" width="600" (window:resize)="onResize($event)"> </canvas>

您应该使用 css 将高度和宽度设为 100%。这实际上将 Canvas 变成了图像。这就是为什么当你放大时它会像素化。下一步是为嵌入 Canvas 的元素设置功能或样式。这就是解决方案出现的地方。因为你不能在不丢失图形的情况下调整 Canvas 。您必须调整封装它的元素!
前任:

<div id="area-chart">
  <canvas id="canvas" (window:resize)="onResize($event)"> </canvas>
</div>

您将动态调整 的高度和宽度#面积图 .我个人建议使用视口(viewport)宽度来定义高度，因为它在缩放方面是最灵活的，并且图形像素化远低于使用其他测量值(%、px、pt 等)。当然，您的需求可能与我的不同，但这里有一些示例样式。
示例scss:

#area-chart {
  #canvas {
    width: 100%;
    height: 10vw;
  }
}

负载图表:

图表按比例缩小:

放大图:

** 请注意，屏幕截图中的像素尺寸是完整的窗口大小，而不是元素的大小