canvas 适配浏览器可视窗口出现滚动条问题

最新推荐文章于 2024-04-25 17:38:18 发布

纯爱枫若情

最新推荐文章于 2024-04-25 17:38:18 发布

阅读量4.7k

点赞数 5

分类专栏： canvas Javascript 文章标签： canvas 适配全屏 js

本文链接：https://blog.csdn.net/lovefengruoqing/article/details/100929531

版权

Javascript 同时被 2 个专栏收录

44 篇文章 2 订阅

订阅专栏

canvas

9 篇文章 2 订阅

订阅专栏

canvas 适配浏览器可视窗口出现滚动条问题

一般来说，对于前端数据可视化工程师来说，canvas 是个极好的工具。

既能用 canvas 2d 调用 CanvasRenderingContext2D 的 api 来绘制各种图表、图形，这个主要依赖 cpu 来计算。也能用 canvas 3d webgl 来绘制各种图形、图表，它主要依赖 gpu 来绘制各种图形。

最近突然遇到一个问题是，我有一个 canvas 元素，我想每次出来都让他自适应屏幕可视区域的大小。

我第一反应就是，直接设置 css 属性 width: 100%; height: 100% ，但是马上就被我自己给否决了。

因为出于以往的经验来说，在 canvas 元素上用设置 100% 这种参数，应该是达不到这种效果的。

为了验证我的猜想，于是我开始写代码验证了：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0px;
        margin: 0px;
        border: 0;
      }
      html,
      body {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <script>
      const canvas = document.createElement('canvas');
      document.body.appendChild(canvas);
      canvas.style.width = 100 + '%';
      canvas.style.height = 100 + '%';
      canvas.style.background = '#aaa';
    </script>
  </body>
</html>

然后在浏览器中运行页面：

果然不出所料，可以是可以，但是会出现侧边滚动条，这是为什么呢？为什么 div 就没有这种全屏滚动条呢？

带着这种怀疑，我打开控制台，看了一下，原来 canvas 元素的 style 属性中的 display 为 inline，是不是因为这个原因导致的呢？

于是我改了改其 display 属性值，将其改为 block，发现果然如我所料，滚动条消失了：

看来碰到问题的时候，不能急于全盘否定，需要先测试一下，深究一番到底是什么原因导致结果与预想的不符。

知道原因了以后，那么我们就明白了，可以用哪些方式达到我们想要的效果了。

但是需要注意的一点是，对于 canvas 来说，style 的 width 和 height 不等同于画布的大小，画布的大小是 HTMLCanvasElement.prototype.width 和 HTMLCanvasElement.prototype.height 这两个属性控制的，可以参考一下 html 标准中的这一段话：

The [canvas](https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element) element has two attributes to control the size of the element’s bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The [width](https://html.spec.whatwg.org/multipage/canvas.html#attr-canvas-width) attribute defaults to 300, and the [height](https://html.spec.whatwg.org/multipage/canvas.html#attr-canvas-height) attribute defaults to 150.

也就是说，canvas.width 和 canvas.height 才是真正控制画布大小的。

一般正常情况下，会将 canvas.width 和 canvas.height 大小调整到与 canvas.style.width 和 canvas.style.height 等大。

不然会导致如下图所示的效果：

两个图的 canvas.width 和 canvas.height 属性均为 100，但是由于 canvas.style.width 和 canvas.style.height 属性不同，导致一张图呈现被拉伸的模糊的效果，一般情况下，我们不希望会出现这样的效果。

所以接下来，我会总结一下，如果想要将 canvas 画布设置为适配浏览器窗口大小，需要几个步骤：

选择一种将 canvas 元素适配窗口的方案，无论是百分比、 vw 等 css 方法，还是采用 js 获取窗口尺寸再调整的方法，请注意一定要调整下 canvas 元素的 display 属性或者将父元素的 overflow 设置为 hidden，否则会出现滚动条。
将 canvas.width 和 canvas.height 设置为与其样式尺寸等大。
开始编程吧。

纯爱枫若情

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
canvas 适配浏览器可视窗口出现滚动条问题

canvas 适配浏览器可视窗口出现滚动条问题一般来说，对于前端数据可视化工程师来说，canvas 是个极好的工具。既能用 canvas 2d 调用 CanvasRenderingContext2D 的 api 来绘制各种图表、图形，这个主要依赖 cpu 来计算。也能用 canvas 3d webgl 来绘制各种图形、图表，它主要依赖 gpu 来绘制各种图形。最近突然遇到一个问题是，我有一个...
复制链接

扫一扫