React的画布上下文操作

Posted 2021-04-27

我正在尝试创建一个画板，将鼠标悬停在该画板上应在画布上留下痕迹。

出于某种原因，我画布上的每个点都怪异地连接到该对角线。我在画布操作上搞砸了吗？

这是我的代码

const {useRef} = React;

function DrawingPad() {
  const canvasRef = useRef(null);
  const [width,height] = [800,500];
  const prevpos = React.useRef({x:0,y:0});

  const currentpoint = e =>{
    const rect = canvasRef.current.getBoundingClientRect();
    return {x:e.clientX - rect.left, y:e.clientY - rect.top}
  }
  const mousemove = e => {
    const ctx = canvasRef.current.getContext('2d');
    const {x,y} = currentpoint(e);
    ctx.beginPath();
    ctx.moveTo(prevpos.current.x,prevpos.current.x);
    ctx.lineTo(x,y);
    ctx.stroke(); 
    prevpos.current = {x,y};
  }


  return (
    <canvas 
      ref={canvasRef} 
      width = {width} 
      height = {height}
      onMouseMove={mousemove}/>
  )
}

ReactDOM.render(<DrawingPad />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="app"></div>

我没有使用任何状态，因为我不需要任何重新渲染

答案

ctx.moveTo(prevpos.current.x,prevpos.current.x)

在上一行moveTo函数的第二个参数应更改为prevprops.current y。错字？