Javascript 缩放html画布（html/JS）

我正在尝试缩放画布：

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>
    );
  }
}

class地下城地图扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
const canvas=this.refs.canvas；
const ctx=canvas.getContext（'2d'）；
ctx.刻度（2，2）
this.setState（{}）
}
render（）{
console.log（“呈现”）
报税表（
);
}
}

代码可以编译，但没有应用画布缩放，我尝试了不同的缩放值

如您所见，我还尝试放置

this.setState（{}）

以强制重新渲染，但画布仍然没有缩放

我非常确定

componentDidMount（）

是正确的方法，因为我必须确保在加载HTML后应用缩放：

---

如何为画布应用缩放？

尝试在

元素上设置

宽度
和
高度
属性：

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>
    );
  }
};

class地下城地图扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
const canvas=this.refs.canvas；
//缩放图元本身的步骤
画布宽度=500；
高度=500；
//要缩放图形，请使用上下文
const ctx=canvas.getContext（'2d'）；
ctx.刻度（2，2）；
}
render（）{
console.log（“呈现”）
报税表（
);
}
};

顺便问一下：我不是很确定，但是JSX中的
元素不应该有一个结束标记吗？还是JSX处理的方式不同？我自己不太使用JSX。
尝试在component状态下设置属性画布，并在componentDidMount中设置setState（{width:600，heigth:500}）

class地下城地图扩展组件{
建造师（道具）{
超级（道具）；
这个州={
宽度：200，
身高：300
}
}
componentDidMount（）{
const canvas=this.refs.canvas；
//缩放图元本身的步骤
canvas.width=this.state.widt；
canvas.height=this.state.height；
//要缩放图形，请使用上下文
const ctx=canvas.getContext（'2d'）；
ctx.刻度（2，2）；
this.setState（{widt:1000，height:800}）
}
render（）{
console.log（“呈现”）
报税表（
);
}
};

这必须找到
这会缩放画布的内容吗？不会。要缩放内容，还需要通过绘图上下文缩放内容。这将缩放画布的宽度/高度。缩放画布：缩放内容：等等，那么调用“缩放”是否缩放画布的大小？
的大小和绘制到画布上的内容的大小完全不同。你的问题是，你想知道如何缩放画布，这就是我的答案。如果不希望缩放
元素本身，而是缩放它显示的图形，则必须使用
元素的绘图上下文的
缩放方法。如果要缩放
元素及其显示的内容，必须在我的答案中使用代码以及绘图上下文的
缩放方法。我编辑了我的答案，因此它显示了如何缩放
元素以及如何缩放上下文
    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>
    );
  }
};