在 css 网格中反应 canvas 不是全尺寸

React canvas in css grid not full size

我正在用 React 构建一个线绘图仪。这个“线条绘图仪”应该在项目的 css 网格内。 为了绘制线条,我尝试使用 <canvas> 元素。首先是聪明还是有更好的方法?
但其次也是最重要的是,我的 canvas 未设置为网格项内的完整大小。有没有办法做到这一点,然后将 canvas 的原点设置到 canvas 的中间?
到目前为止我的代码:

const Canvas = props => {

    const { draw, settings, ...rest } = props
    const canvasRef = useRef(null)

    useEffect(() => {

        const canvas = canvasRef.current
        const context = canvas.getContext('2d')
        draw(context, settings)
    }, [draw])

    return (
        <div className={"fractal_tree_canvas"}>
            <canvas ref={canvasRef}/>
        </div>
    )
}

和css

.fractal_tree_canvas {
  height: 100%;
  width: 100%;
  grid-row: 2;
  grid-column: 2;

}

最后是腰带:

.fractal_tree_screen {
  background-color: #e7e7e7;
  display: inline-grid;
  position: relative;
  width: 100vw;
  height: calc(100vh - 65px);
  grid-template-columns: 5% 50% auto 5%;
  grid-template-rows: 6% 1fr 6%;

}

但不知何故,我的 canvas 最终尺寸为 300x150,我可以做些什么来使其成为项目的完整尺寸吗?

<canvas 并非设计为像其他元素一样由 CSS 响应或控制。 要控制其宽度和高度,您必须设置其 width and height HTML 属性。

如果未设置这些属性,它将默认为 300x150,这就是您的情况。

因为你有 React,你可以计算所需的值并在 JSX 本身中设置它。

如果你想处理调整大小,你需要监听调整大小事件,相应地改变canvas属性并重绘它。