html 元素自适应

对于我们做前端可视化的人来说，最苦恼的一个地方莫过于，客户需要我们对产品做自适应，特别是还需要做 pc 端的自适应。

一般，面对这个需求的时候，由普通的 html 元素（不包含 canvas）构成的页面，你可以通过对元素的尺寸进行特殊的设置，不采用常用的 px 方案，而是通过设置百分比、vw、em等方式，或者通过媒体查询，或者通过近些年比较流行的 flex 弹性布局等等方案来解决这个问题。

这么多方案，从中选一种，肯定会适合你的一款。

canvas 自适应的问题

但是对于 canvas 来说，以上方案就捉襟见肘了。

canvas 相当于一个画布，我们朝 canvas 上面添加内容相当于是在画布上绘图。

因此，当 canvas 元素物理尺寸改变的时候，我们画布上的内容，必须要清空了重画。不然，我们绘制到其中的内容，就会被放缩，看起来就会失真了。

而且对于 canvas 来说，它本身有个 width 和 height 来控制绘图区域的尺寸的，一般我们称之为 canvas 画布尺寸。

参考页面：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

image.png

一般情况下，这个画布尺寸需要设置成和 canvas 元素的实际尺寸等大，这个尺寸也就是通过 canvas 元素的 css 属性 height、width 来控制的。

不然，就会出现尺寸比较难控制，跑偏的情况（这个一般出现在 canvas 尺寸比其 css 控制的尺寸大的情况）；或者会出现 canvas 上绘制的内容模糊的情况（一般出现在 canvas 尺寸比其 css 控制的尺寸小的情况）。

第一种情况

第二种情况

可以看到，这两种情况的显示效果都不太好。

一般的解决思路

因此为了使得我们的 canvas 画布的大小，与他自身物理尺寸的大小相互吻合，我们必须要在 canvas 物理尺寸发生变化的时候，做出一定的应对策略。

这就是所谓的事件监听回调的机制。

但是问题就出现在，如果我们的 canvas 元素，是通过手动设置 px 尺寸，来控制大小的，那么，我们可以顺便在设置 px 的时候，顺手把 canvas 画布的大小改变了，这种逻辑用 js 实现起来很简单。

比如用 window 对象上的 onresize 事件监听窗口的变化，然后在 canvas 上套一个父 div 对象，父 div 对象 css 属性的宽高设置成 100% 这种。然后，当窗口大小发生变化的时候，我们就能调用我们事先写好的回调函数，里面会获取到父 div 的尺寸，设置到 canvas 上去，完成我们的自适应操作。

但是这个地方有个缺点是，如果我们界面上的布局是可以手动变化的，比如有个侧边栏，可以展开收拢，那么此时我们的 onresize 事件就失效了，我们必须要手动管理尺寸的变化，手动调用 onresize 的回调了。

这样还是比较麻烦的。

有没有一劳永逸的方法呢？canvas 自身尺寸变化的时候，为什么就没有监听事件呢？这难道是设计的 bug？

而且一般在实际使用的情况下，我们往往不想采取上面那样做，回调来回调去的，太麻烦了。

有时候，我们有多个元素需要这种自适应处理，我们还得针对每个元素都进行这样的处理，着实不好管理。

理想的解决方案

往往，我们想达到的理想的状况是，我们能通过设置百分比或者 vw 这些方式来设置元素的尺寸。

那到底在元素尺寸变化的时候，有没有办法能监听到变化，并且做出改变呢？

答案当然是有的，就藏在我们的 stackoverflow 上：https://stackoverflow.com/questions/10086693/resize-on-div-element。

答案截图

简单的说，就是通过给元素，设置一个 iframe 子元素。

给 iframe 的宽高设置成 100%，那么他就会跟随着父元素来变化。

而且 iframe 又可以添加 onresize 监听。

自适应小 demo

这个原理说起来简单，但是一下子你还真不一定能想得到。

而下面是我优化后实现这个功能的关键性代码：

function setResize(target, callback) {
  // 创建 iframe
  var iframe = document.createElement('iframe');
  // 改变样式
  iframe.style.cssText = `
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
        border: 0; margin: 0; display: block; z-index: -999;
  `;

  // 将其设置为传入对象的孩子元素
  target.appendChild(iframe);

  var oldWidth = target.offsetWidth;
  var oldHeight = target.offsetHeight;

  // onresize 回调
  function resizeHandler() {
    var newWidth = target.offsetWidth;
    var newHeight = target.offsetHeight;
    if (oldWidth !== newWidth || oldHeight !== newHeight) {
      callback && callback({ width: newWidth, height: newHeight }, { width: oldWidth, height: oldHeight });
      oldWidth = newWidth;
      oldHeight = newHeight;
    }
  }

  var timer;
  (iframe.contentWindow || iframe).onresize = function() {
    /** 添加防抖机制 **/
    clearTimeout(timer);
    timer = setTimeout(resizeHandler, 20);
  };
}

当然以上代码如果在实际中使用的话，还要考虑兼容性，还需要优化，但是这个功能基本的框架就是这样的。

实际使用的时候，传入 dom 对象，传入回调函数：

let canvas = document.querySelector('canvas');
let parentDom = canvas.parentElement;
canvas.width = parentDom.clientWidth;
canvas.height = parentDom.clientHeight;

setResize(parentDom, (newData, oldData) => {
  canvas.width = newData.width;
  canvas.height = newData.height;
  render();
});

html 结构为这样：

<div id="root">
  <canvas></canvas>
</div>

css 样式设置成这样：

html,
body {
  margin: 0;
  padding: 0;
}
#root {
  width: 100vw;
  height: 100vh;
  position: relative;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
}

实际使用的过程中，拖动窗口的时候，效果如下：