React中如何获取canvas的正确宽度和高度？

Question

我正在尝试在React中使用画布(canvas)。以下代码应该给我一个800x800的黑色画布，但由于某种原因它忽略了我的尺寸并显示了一个300x150的画布。

import React, {Component} from "react";

class Sample extends Component {

    state = {
        canvasWidth: 800,
        canvasHeight: 800
    }
    canvasRef = React.createRef();

    componentDidMount() {
        const canvas = this.canvasRef.current;
        const context = canvas.getContext('2d');
        context.fillRect(0, 0, this.state.canvasWidth, this.state.canvasHeight);
    }

    render() {
        return (
            <div>
                <canvas ref={this.canvasRef} />
            </div>
        );
    }
}

export default Sample

- skypen

Answer 1

您需要将宽度和高度设为HTML属性：

   <canvas ref={this.canvasRef} width={this.state.canvasWidth} height={this.state.canvasHeight}/>

- Auskennfuchs

---

给楼主的提示：要小心这个问题，因为即使使用 ref，每当通过 setState() 改变 width 和 height 时，画布都会被清空。 - Patrick Roberts

谢谢，这个方法可行。@PatrickRoberts，你有什么更好的建议吗？ - skypen

@skypen 这是一个不错的建议，我只是想让你知道可能会有意想不到的副作用。这种行为不仅限于React，而是因为 width 和 height 属性实际上是属性访问器，在调整大小时也会清除画布。 - Patrick Roberts