缩放 html 画布（html / reactjs）答案

【问题标题】：scale html canvas (html / reactjs)缩放 html 画布（html / reactjs）
【发布时间】：2019-05-02 03:05:53
【问题描述】：

我正在尝试缩放画布：

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

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

如您所见，我还尝试使用 this.setState({}) 强制重新渲染，但画布仍未缩放。

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

如何为画布应用缩放比例？

【问题讨论】：

标签： javascript html reactjs html5-canvas scaling

【解决方案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。

【讨论】：

这会缩放画布的内容吗？
没有。要缩放内容，您还需要通过绘图上下文缩放内容。这会缩放画布的宽度/高度。缩放画布：developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/… 缩放内容：developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/…
等等，调用 'scale' 是否会缩放画布的大小？
<canvas> 的大小和绘制在上面的东西的大小是完全不同的东西。您的问题是，您想知道如何缩放画布，这就是我的答案。如果您不想想要缩放<canvas> 元素本身但它显示的图形，则必须使用<canvas> 元素的绘图上下文的scale 方法。如果要缩放 <canvas> 元素和它显示的内容，则必须使用我的答案中的代码以及绘图上下文的 scale 方法。
我编辑了我的答案，因此它显示了如何缩放 <canvas> 元素以及如何缩放上下文

【解决方案2】：

尝试在组件状态下设置属性画布，并在 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>
    );
  }
};

这个必须找到

【讨论】：