缩放 html canvas (html / reactjs)

Question

我正在尝试缩放 canvas:

class DungeonMap extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() { 
    const canvas = this.refs.canvas;
    const ctx = canvas.getContext('2d');
    ctx.scale(2, 2)
    this.setState({})
  }
  render() {
    console.log("render")
    return (   
      <div className="DungeonMap">             
          <canvas ref="canvas" style={canvasStyle}/>
      </div>
    );
  }
}

代码编译但未应用 canvas 缩放，我尝试了不同的缩放值。

如您所见，我也尝试放置 this.setState({}) 以强制重新渲染，但 canvas 仍未缩放。

我很确定 componentDidMount() 是正确的使用方法，因为我必须确保在加载 HTML 后应用缩放：Cannot read property 'getContext' of null, using canvas

如何为 canvas 应用缩放？

Answer 1

尝试在 <canvas> 元素上设置 width 和 height 属性：

class DungeonMap extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() { 
    const canvas = this.refs.canvas;

    // to scale the <canvas> element itself
    canvas.width = 500;
    canvas.height = 500;

    // to scale the drawings, use the context
    const ctx = canvas.getContext('2d');
    ctx.scale(2, 2);
  }
  render() {
    console.log("render")
    return (   
      <div className="DungeonMap">             
        <canvas ref="canvas" style={canvasStyle}/>
      </div>
    );
  }
};

顺便说一句：我不是很确定，但是你的 JSX 中的 <canvas> 元素不应该有一个结束标签吗？还是 JSX 处理不同？我自己没怎么用 JSX。

Answer 2

尝试在组件状态中设置一个属性 canvas 并在 componentDidMount 中设置 setState({width:600,heigth:500})

    class DungeonMap extends Component {
  constructor(props) {
    super(props);
this.state={
        width:200,
        height:300
}
  }
  componentDidMount() { 
    const canvas = this.refs.canvas;

    // to scale the <canvas> element itself
    canvas.width = this.state.widht;
    canvas.height = this.state.height;

    // to scale the drawings, use the context
    const ctx = canvas.getContext('2d');
    ctx.scale(2, 2);
  this.setState({widht:1000,height:800})
  }
  render() {
    console.log("render")
    return (   
      <div className="DungeonMap">             
        <canvas ref="canvas" style={canvasStyle}/>
      </div>
    );
  }
};

必须找到这个

缩放 html canvas (html / reactjs)

scale html canvas (html / reactjs)

html

javascript

scaling

html5-canvas

reactjs