搜索
  • 如何解决canvas绘图的移动端适配?
  • 发布于 2个月前
  • 608 热度
    0 评论
因为canvas是基于像素的绘图，我们在pc端封装的canvas绘制方法如果想直接迁移至移动端并实现移动端适配，可以使用如下思路：使用transform的scale对画布进行缩放，缩放比例的计算并不难，思路就是canvas（像素大小）占手机dip的比例等于设计稿上canvas占设计稿的比例，并且移动设备上canvas的像素大小可以用pc端的canvas大小✖️缩放比例来表示，即：css复制代码pc端canvas图像宽度(像素大小) * 缩放比例 / 移动设备的dip宽度 === 设计稿上canvas部分的宽度 / 设计稿宽度

综上可得适配方法adaptMobile：
/**
 * @param {number} designWidth: 设计稿上的canvas宽度
 * @param {number} width: 设计稿的宽度
 * @param {Element} canvasElm: canvas元素
 */
function adaptMobile(designWidth, width, canvasElm) {
  const ratio = designWidth / width; // 目标canvas占屏幕的宽度比例
  const screenPx = screen.width; // 当前设备的宽度dip像素数
  const canvasWidth = parseInt(canvasElm.style.width); // canvas的宽度
  canvasElm.style.transformOrigin = '0 0';
  canvasElm.style.transform = `scale(${ratio * screenPx / canvasWidth})`;
}

canvasElm即用pc端的绘制方法所绘制的画布，但当前还存在一个问题，因为pc端绘制时canvas的像素大小（宽度）可能超出移动设备的dip宽度，虽然经过transform缩放后画布已经完全在手机屏幕之内，但是熟悉浏览器渲染原理的朋友肯定知道，transform是在渲染的最后一步完成的，不参与render tree的构建以及布局绘制等等前面的逻辑，所以这就导致移动端出现滚动条。


解决方案很简单：给canvas的dom元素外面套一个空<div>，给这个div设置一个overflow: hidden即可解决。综上我们就完成了pc端绘制的canvas图像无痛迁移到移动端实现适配的流程。给个demo，如下adaptMobile(375, 750, canvasElm);即等价于让canvas元素width: 50vw，可以切换不同型号的移动设备感受：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>堆代码 duidaima.com</title>
    <style>
      .canvas-container {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="canvas-container">
      <canvas id="canvasElm"></canvas>
    </div>
    <script>
      const canvas = document.getElementById('canvasElm');
      canvasElm.width = 300;
      canvasElm.height = 300;
      canvasElm.style.width = 500 + 'px';
      canvasElm.style.border = `1px solid red`;
      const ctx = canvasElm.getContext('2d');
      ctx.fillStyle = 'pink';
      ctx.fillRect(0, 0, 150, 150);
      /**
       * @param {number} designWidth: 设计稿上的canvas宽度
       * @param {number} width: 设计稿的宽度
       * @param {Element} canvasElm: canvas元素
       */
      function adaptMobile(designWidth, width, canvasElm) {
        const ratio = designWidth / width; // 目标canvas占屏幕的宽度比例
        const screenPx = screen.width; // 当前设备的宽度dip像素数
        const canvasWidth = parseInt(canvasElm.style.width); // canvas的宽度
        canvasElm.style.transformOrigin = '0 0';
        canvasElm.style.transform = `scale(${ratio * screenPx / canvasWidth})`;
      }
      adaptMobile(375, 750, canvasElm);
    </script>
  </body>
</html>
plus：这里有人反应过来会问，为啥不直接设置canvas元素宽度为50vw，因为canvas只支持通过canvasElm.style.width来设置像素大小hh。并且这里还有个可能让你迷惑的点就是，为啥不直接操作canvasElm.style.width完成移动端适配，也就是说计算移动设备上应该要画多少像素，完全没问题，但是业务场景所需，可以理解为我们业务中pc端的绘制方法内包含了对canvasElm.style.width的设置，并且这个方法相当于一个黑盒，我们无法操作。

用户评论
可能感兴趣的话题