canvas如何自适应窗口大小

最新推荐文章于 2024-05-27 11:26:55 发布

在下月亮有何贵干

最新推荐文章于 2024-05-27 11:26:55 发布

阅读量6.5k

点赞数 4

分类专栏：开发工作中的小问题文章标签： html5 html javascript canvas

本文链接：https://blog.csdn.net/weixin_43877799/article/details/120726611

版权

开发工作中的小问题专栏收录该内容

30 篇文章 1 订阅

订阅专栏

问题

canvas的宽高不能用百分比来显示，如果想用canvas做一个图希望能够自适应窗口宽度怎么办。

正文

这里我们先画了一个宽为canvas宽度的红色矩形，这样canvas如何变化自己的宽度，矩形都可以跟着改变。

<!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,chrome=1" />
  <title> 页面名称 </title>
  <style type="text/css">

  </style>
</head>

<body>
  <div style="width: 100%" id='content'>
    <canvas id='box' width="300" height="300"></canvas>
  </div>
</body>

<script>
  /** @type {HTMLCanvasElement} */
  const canvas = document.getElementById('box')
  const ctx = canvas.getContext('2d')
  const draw = () => {
    const { width } = canvas
    ctx.fillStyle = 'red'
    //用canvas的宽长绘图
    ctx.fillRect(0, 0, width, 50)
  }
  draw()
</script>

在这里插入图片描述

我们希望这个红色的矩形作为网页顶部的导航。

那么它必须宽达到网页的百分百，那么我们可以把父级div的百分百宽度赋予给他。

<!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,chrome=1" />
  <title> 页面名称 </title>
  <style type="text/css">

  </style>
</head>

<body>
  <div style="width: 100%" id='content'>
    <canvas id='box' width="300" height="300"></canvas>
  </div>
</body>

<script>
  /** @type {HTMLCanvasElement} */
  const canvas = document.getElementById('box')
  const ctx = canvas.getContext('2d')
  const draw = () => {
    //获取父级宽度并赋值给canvas
    const contentWidth = document.getElementById('content').clientWidth
    canvas.width = contentWidth
    
    const { width } = canvas
    ctx.fillStyle = 'red'
    ctx.fillRect(0, 0, width, 50)
  }
  draw()
</script>

</html>

在这里插入图片描述
看似达到了效果，但是当我们缩小页面时，发现了问题。

因为我们赋予canvas宽度时传入的是定值，而网页缩小时，canvas的宽度还是没有改变。

于是我们可以想到监听网页的缩放事件。

每次缩放都重新将重新改变canvas的宽度重新绘制。

<!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,chrome=1" />
  <title> 页面名称 </title>
  <style type="text/css">

  </style>
</head>

<body>
  <div style="width: 100%" id='content'>
    <canvas id='box' width="300" height="300"></canvas>
  </div>
</body>

<script>
  /** @type {HTMLCanvasElement} */
  const canvas = document.getElementById('box')
  const ctx = canvas.getContext('2d')
  const draw = () => {
    const contentWidth = document.getElementById('content').clientWidth
    canvas.width = contentWidth
    const { width } = canvas
    ctx.fillStyle = 'red'
    ctx.fillRect(0, 0, width, 50)
  }
  draw()
  //窗口缩放事件
  window.onresize = function () {
    draw()
  }
</script>

</html>

问题解决。

在下月亮有何贵干

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas如何自适应窗口大小

问题canvas的宽高不能用百分比来显示，如果想用canvas做一个图希望能够自适应窗口宽度怎么办。正文这里我们先画了一个宽为canvas宽度的红色矩形，这样canvas如何变化自己的宽度，矩形都可以跟着改变。<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,
复制链接

扫一扫