canvas 大小自适应屏幕（自动铺满屏幕）

最新推荐文章于 2024-04-27 09:37:11 发布

不就是个div嘛

最新推荐文章于 2024-04-27 09:37:11 发布

阅读量1.3w

点赞数 6

分类专栏：前端小白 canvas 文章标签： html5

原文链接：https://www.hangge.com/blog/cache/detail_1871.html

版权

前端小白同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

canvas

3 篇文章 1 订阅

订阅专栏

原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1871.html

1，问题描述
我们知道使用 canvas 元素可以创建出一个空白的画布。

但是这样创建的画布尺寸是一开始就设置好的，不能随着浏览器窗口大小的改变而动态改变。而 Canvas 又无法直接将 width 或 height 属性设置为 100% 来自适应屏幕。

2，解决办法
如果我们想让画布撑满整个浏览器窗口。也就是说要当我们改变浏览器窗口大小时，画布也能随之改变，可以进行如下操作：
CSS 方面：去掉所有元素的外间距、内边距，html 和 body 宽高设为 100%，canvas 元素 display 设为 block
JS 方面：监听窗口的 resize 事件，在窗口大小改变的同时调整 canvas 的大小。

3，完整代码
这里我们使用 jQuery 来处理窗口尺寸改变事件响应，以及属性设置。
同时使用 $(window).get(0).innerHeight 获取窗口高度，而不是 $(window).height()。是因为后者效果并不完美，无法返回所有浏览器窗口的完整高度值，这样浏览器窗口中 canvas 元素和滚动条的四周可能会仍存在白色区域。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.1.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
        width: 100%;
      }
      canvas {
        display: block;
        background: #D6F8FF;
      }
    </style>
    <script type="text/javascript">
      $(function() {
        //添加窗口尺寸改变响应监听
        $(window).resize(resizeCanvas);
        //页面加载后先设置一下canvas大小
        resizeCanvas();
      });
 
      //窗口尺寸改变响应（修改canvas大小）
      function resizeCanvas() {
        $("#myCanvas").attr("width", $(window).get(0).innerWidth);
        $("#myCanvas").attr("height", $(window).get(0).innerHeight);
      };
    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="200">
  </body>
</html>

不就是个div嘛

关注

6
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
canvas 大小自适应屏幕（自动铺满屏幕）

原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1871.html1，问题描述我们知道使用 canvas 元素可以创建出一个空白的画布。但是这样创建的画布尺寸是一开始就设置好的，不能随着浏览器窗口大小的改变而动态改变。而 Canvas 又无法直接将 width 或 height 属性设置为 100% 来自适应屏幕。2，解决办法如果我们想让画布撑满整个浏览器窗口。也就是说要当我们改变浏览器窗口大小时，画
复制链接

扫一扫