请问canvas内容自适应怎么实现的

Question

canvas的宽度变小，里面的内容也跟着缩放。
难道都是用百分比计算出来的位置？
有没有类似小程序rpx的技术？
图中是百度的echart

Answer 1

window.onresize的时候重新绘制canvas，echarts也是提供了resize方法的

Answer 2

要不要试一下纯 CSS 的方式？

https://codepen.io/xboxyan/pe...

Answer 3

resize,此api需要手动调用来改变图表大小

window.onresize = function () {
  myChart.resize();
};

在线示例

Answer 4

这个有比较多的方案，比如图像计算中引入一个放缩变量（控制）系数（如果是等比例放缩，这个系数只需要一个，如果允许拉伸，则还需要有scX和scY的区别），这样在resize的处理中，先计算出这个系数，再在所有需要的地方计算则可以很快获取正确的结果。

或者先统一计算，再整个乘上放缩系数来映射放缩都是可以的。

Answer 5

离线 canvas 原始大小
画完了，直接 缩放贴到 目标 canvas

Answer 6

• ECharts 是监听了屏幕缩放，然后调用实例的 resize 方法调整图像尺寸的；
• rpx 的屏幕适配是基于屏幕宽度的，在开发中可以使用 px2rem 达到近似的效果。
  但是 canvas 比较特殊，除了 style.width、style.height 之外，它还有画布本身的 width 跟 height 属性，而屏幕适配只能修改 style.xxx，画布的内容则是等比缩放的，缩放倍数略大一点，就会导致图像出现锯齿或者边缘变糊。

虽然 canvas 呈现的是位图，但不妨碍人们为它封装矢量图绘制接口，如果因为缩放而影响画质的话就失去了矢量图绘制的优点了。
所以最好的方法是像 ECharts 那样，封装一个缩放的方法，跟随屏幕缩放。
再次一点的方案，可以把 canvas 的 width、height 设为尺寸变化范围的最大值，因为图像缩小带来的不良效果通常要轻微一些（拟合通常比插值靠谱）。