html canvas受外层flex布局影响问题

最新推荐文章于 2023-03-18 21:20:35 发布

前端陈平安

最新推荐文章于 2023-03-18 21:20:35 发布

阅读量539

点赞数

分类专栏： css 搬砖杂碎文章标签： html javascript 前端

本文链接：https://blog.csdn.net/big_gg/article/details/126370953

版权

搬砖杂碎同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

问题

在使用canvas时发现其宽高无法政策设置

业务代码

逻辑代码

initCanvas() {
      const canvas = document.getElementById('my_canvas');
      canvas.width = 500; // 设定canvas的宽度、高度
      canvas.height = 500;
      const ctx = canvas.getContext('2d');
      const img1 = new Image();
      img1.src = `${process.env.PUBLIC_URL}/images/checkBook.png`;
      img1.onload = (res) => {
          console.log(res);
          const { path } = res;
          const img = path[0];
          const { naturalWidth, naturalHeight } = img;
          ctx.drawImage(img1, 10, 10, naturalWidth, naturalHeight);
      };
  }

UI使用的时material-ui

	<Box display="flex" flexDirection="column" flex={1} p={1}>
        <canvas id="my_canvas" />
         <Box display="flex" alignItems="center" m={1}>
             <Button
                 variant="contained"
                 color="primary"
                 onClick={() => {
                 }}
             >
                 保存图片
             </Button>
         </Box>
     </Box>

浏览器显示
在这里插入图片描述
虽然canvas元素的宽高是500，但是我不知道为什么赋予了它clientHeight和clientWidth为701

后来发现是父层的flex影响，只要去掉父层的flex布局，或是给canvas外层加上一层div包裹就能解决问题，暂时不知道是什么原因导致的，在这里记录一下