Question

这个Codepen说明了使用网格将页面划分为4个相等的象限。每个象限都包含一个canvas元素。启用＆＃34;实验性Web平台功能＆＃34;在Chrome中为此工作。

目标是允许画布根据网格的大小和布局调整自身大小。 HTML：

<div class="wrapper">
  <div class="box"><canvas></canvas></div>
  <div class="box"><canvas></canvas></div>
  <div class="box"><canvas></canvas></div>
  <div class="box"><canvas></canvas></div>
</div>

CSS：

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

.wrapper { 
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat( 2, 1fr );
  grid-template-rows: repeat( 2, 1fr );
}

.box {
  border: 2px solid #aaaaaa;
  border-radius: 5px;
}

JS：

const els = Array.from(document.querySelectorAll('.wrapper div'))
const drawCanvases = function (els) {
  els.forEach(el => {
    const can = el.querySelector('canvas')
    can.width = can.parentElement.clientWidth
    can.height = can.parentElement.clientHeight-4


    var ctx = can.getContext("2d")
    ctx.clearRect(0, 0, can.width, can.height)
    ctx.font = "30px Arial"

    var mx = can.width/2
    var my = can.height/2
    ctx.fillText(`${can.width}px, ${can.height}px`,mx,my)
  })
}

window.addEventListener('resize', e => {
  drawCanvases(els)
})

drawCanvases(els)

问题是如果画布将其大小设置为上面的父div元素，那么网格将永远不能使列/行大小更小。试试Codepen，它在元素的中心显示画布大小 - 你可以拖动并使画布元素增长，但你永远不能让它们缩小。

如果不手动重新计算我们应该在画布上设置的大小，这是否可行？

Answer 1

四个div元素的宽度始终为视口宽度的50％（因为您使用的display: grid包含2列）。不要将canvas元素的大小设置为其父div，而是将每个canvas的宽度设置为视口宽度的50％（或者其包装元素宽度的50％）是）。

如果您启用了实验性网络平台功能，此演示仅适用于Chrome。

const els = Array.from(document.querySelectorAll('.wrapper div'))


  els.forEach(el => {
    const can = el.querySelector('canvas')
    var ctx = can.getContext("2d")
    ctx.clearRect(0, 0, can.width, can.height)
    can.width = window.innerWidth * .5
    can.height = 300
    ctx.font = "30px Arial"
    ctx.fillText(`${can.width}px`,10,50)
  })

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper { 
  display: grid;
  grid-template-columns: repeat( 2, 1fr );
  grid-template-rows: repeat( 2, 1fr );
}

canvas {
  height: 300px;
}

<div class="wrapper">
  <div><canvas></canvas></div>
  <div><canvas></canvas></div>
  <div><canvas></canvas></div>
  <div><canvas></canvas></div>
</div>

由于您无法调整SO窗口的大小以查看效果，因此显示效果相同的Codepen。

Answer 2

@GCyrillus在评论中提到的答案是在相对div中保存的canvas元素上设置position：absolute：

canvas {
  position: absolute;
}

此Codepen与问题中的{{3}}相同，但将样式添加到画布，以便在调整网格行和列的大小时不考虑画布大小。

请记住（截至本文），您需要在Chrome中启用实验性网络平台功能（以及其他浏览器中的类似功能）才能看到此显示：网格布局正常工作。

如何使用CSS显示定义内容大小：网格，而不是容纳它

2 个答案: