我正在尝试在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
ref
,每当通过setState()
改变width
和height
时,画布都会被清空。 - Patrick Robertswidth
和height
属性实际上是属性访问器,在调整大小时也会清除画布。 - Patrick Roberts