让Canvas内容自适应窗口大小变化

挑战： 如何确保Canvas内容在浏览器窗口大小调整后仍然保持最佳显示效果，实现自适应缩放？

解决方案：

实现Canvas内容的自适应缩放，主要有以下几种方法：

• 窗口大小变化监听器： 利用window.onresize事件监听浏览器窗口大小变化。当窗口大小改变时，该事件会被触发，从而重新绘制Canvas内容，实现自适应。

• ECharts框架的resize方法： 如果使用ECharts库创建Canvas图表，可以直接调用其resize()方法。该方法会根据当前窗口大小自动调整Canvas大小和内容，实现自适应缩放。

需要注意的是，直接使用CSS百分比设置Canvas尺寸虽然在某些情况下可以实现自适应，但并非所有场景都适用。例如，如果Canvas的父容器是可滚动的div，则百分比大小的Canvas在滚动时可能不会自动调整大小。 因此，结合JavaScript监听窗口变化并重新绘制，或使用框架提供的resize方法，能提供更可靠的自适应效果。