使画布适合容器答案

【问题标题】：Make canvas to fit to container使画布适合容器
【发布时间】：2021-01-02 17:04:23
【问题描述】：

我有以下反应组件：

render() {
    return (
      <div className="App">
        <header className="App-header">
          <AppBar position="static">
            <ToolBar>
              <Grid container>
                <Grid conatiner justify="center" item lg={10}>
                  <p>The Game Of Life</p>
                </Grid>
                <Grid container direction="row" justify="flex-end" alignItems="center" item lg={2}>
                  <this.BarButton label="Clear" callBack={() => this.catchAction('clear')} />
                  <this.BarButton label="Go!" callBack={() => this.catchAction('go')}/>
                </Grid>
              </Grid>
            </ToolBar>
          </AppBar>
          <Grid container directiorn="row" justify="center" alignItems="center" item lg={10}>
            <canvas id="canvas" width="100vw" heigth="100vh" style={{border: '1px solid #000000'}}></canvas>
          </Grid>
        </header>
      </div>
    )
  }

我希望画布适合AppBar 之后的整个屏幕，所以我尝试将答案应用于this question，但没有一个起作用，并且画布只覆盖了剩余屏幕的一小部分：

我还没有找到解决我的问题的其他方法。

【问题讨论】：

标签： html reactjs canvas

【解决方案1】：

我能够使用 styled-components library 扩展您的画布。

import React from "react";
import { AppBar, Button, Toolbar, Typography } from "@material-ui/core";
import styled from "styled-components";

const CanvasView = () => {
  return (
    <div>
      <AppBar position="static">
        <StyledToolbar>
          <Typography variant="h6">Game of Life</Typography>
          <ButtonContainer>
            <Button variant="contained">Clear</Button>
            <Button variant="contained">Go!</Button>
          </ButtonContainer>
        </StyledToolbar>
      </AppBar>
      <CanvasContainer>
        <StyledCanvas />
      </CanvasContainer>
    </div>
  );
};

const StyledToolbar = styled(Toolbar)`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

const ButtonContainer = styled.div`
  & > button {
    margin-left: 16px;
  }
`;

const CanvasContainer = styled.div`
  width: 100vw;
  height: calc(100vh - 64px);
  overflow: hidden;
`;

const StyledCanvas = styled.canvas`
  width: 100%;
  height: 100%;
  background-color: green;
`;

export default CanvasView;

工作代码沙盒：https://codesandbox.io/s/stack-65541771-fullcanvas-wc7r4?file=/src/CanvasView.js:0-1037

【讨论】：

【解决方案2】：

我错误地尝试应用this answer，但它适用于html组件，而我实际使用的是react组件，因此必须将设置应用为style props：

<canvas id="canvas" style={{border: '1px solid #000000', minHeight: '100vh', minWidth: '100vh'}} />

更改后一切正常。

【讨论】：