有没有一种方法可以使用Canvas在带有react.js的按钮上单击来绘制内容？

如何解决有没有一种方法可以使用Canvas在带有react.js的按钮上单击来绘制内容？

我想使用我的<button>组件来调用特定的函数以使用HTML5 Canvas在我的Canvas上绘制。

这是文件的结构以及我如何传递道具->

我将主函数放置在App.js中，通过props将其传递到MainPage.jsx的中间文件，然后通过props将drawRectangle（）方法传递至canvas.jsx的最低文件

在Canvas.jsx的最低文件中-

useEffect(() => {
const canvas = canvasRef.current;
canvas.width = "500";
canvas.height = "850";
let frameCount = 0;
let animationFrameId;
const c = canvas.getContext("2d");
//Function I want to call ->
drawRectangle(c,'blue')

drawRectangle方法位于App.js文件（最上面的文件）中，按钮位于MainPage.jsx的中间文件中。

我这样通过- 在App.js中

handleRectangle=(c,color)=>
c.fillRect(0,100,100)
<MainPage onRectangle={handleRectangle} />

所以我想使用MainPage.jsx文件中的按钮调用此函数，以便它在画布上绘制一个矩形。我不知道该怎么做。因为drawRectangle（）函数的唯一工作方式是将其放入canvas.jsx的useEffect（）中。

很抱歉，这有点令人困惑，对此我还是一个初学者。

解决方法

是的，您可以使用裁判

您只需在画布html元素上放置一个ref，然后在您的click函数中使用即可：

yourref.current.getContext("2d");

这是一个示例：

https://codesandbox.io/s/flamboyant-tdd-tne28?fontsize=14&hidenavigation=1&theme=dark

上面示例中的代码粘贴在这里：

import React,{useRef} from "react";

const DrawOnCanvas = ()=>{
  const myref = useRef(null);

  const _handleClick=()=>{
    let ctx = myref.current.getContext("2d");
    ctx.fillStyle="blue";
    ctx.fillRect(100,100,32,32);
    
  }
  return <canvas width={500} height={350} onClick={_handleClick} ref={myref}></canvas>
}

export default function App() {
  return (
    <div className="App">
      <DrawOnCanvas />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

如果要在其他组件中调用绘制功能，则可以将其作为道具传递

import React,{useRef} from "react";

const DrawOnCanvas = (props)=>{

  return <canvas width={500} height={350} onClick={props.clickHappened} ref={props.propRef}></canvas>
}

export default function App() {
  const myref = useRef(null);
  const _handleClick=()=>{
    let ctx = myref.current.getContext("2d");
    ctx.fillStyle="blue";
    ctx.fillRect(100,32);
  }

  return (
    <div className="App">
      <DrawOnCanvas clickHappened={_handleClick} propRef={myref}/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

或者如果它确实是全局的，则可以使用localStorage来存储引用

您可以在_handleClick中进行检查，只是为了检查ref是否不为null，并且应该这样做，因此不需要使用useEffect。