为什么画布未显示正确的填充组件？

Question

我正在尝试在react组件中创建一个非常简单的画布。但是画布显示的颜色不正确。

import React, { Component } from 'react'

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.canvasRef = React.createRef();


  }

  componentDidMount() {
    const canvas = this.canvasRef.current;
    const ctx = canvas.getContext('2d')
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = 'blue'

  }
  render() {
    return (
      <div>
        Welcome to Home Page!
        <div className="clearfix"></div>
        <canvas ref={this.canvasRef} />
      </div>
    )
  }
}

我刚刚看到默认的150 * 300默认画布用黑色填充。我想我将其样式设置为蓝色。为什么会这样？

Answer 1

您应在fillStyle之前使用fillRect之前

您的代码应为：

ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

演示：

Answer 2

@Kareem解决方案有效，但是由于没有解释，所以这里是：

调用方法fillRect()时，是在告诉要绘制的画布，因此需要在绘制之前设置其属性。

与documentation中一样：

fillRect() 方法绘制一个填充的矩形，其起始点为 在（x，y）处，其大小由宽度和高度指定。填充 样式由当前的fillStyle属性决定。

因此，如果在设置fillStyle之前绘制它，它将显示为黑色。