Javascript 有没有一种方法可以使用Canvas通过react.js点击按钮来绘制一些东西？

我想使用我的

组件调用一个特定的函数来使用HTML5画布在我的画布上绘制

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

我将main函数放在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')

< >将DrimeLangLoad方法放置在App.js文件（最上面的文件）中，按钮位于主页的中间文件中。 我就这样通过了- 在App.js中

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

handleRectangle=（c，颜色）=>
c、 fillRect（0,0100）

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

---

如果这有点混乱，我很抱歉，我是这方面的初学者。

是的，您可以使用参考文献

您只需在canvas html元素上放置一个ref，并在单击函数中使用该ref：

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

以下是一个例子：

粘贴在此处的上述示例中的代码：

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}来自“React”；
const drawincanvas=（）=>{
const myref=useRef（null）；
const_handleClick=（）=>{
设ctx=myref.current.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（100100,32,32）；
}
返回
}
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

如果你想在另一个组件中调用draw函数，你可以将它作为道具传递

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,100,32,32);
  }

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

import React，{useRef}来自“React”；
const drawincanvas=（道具）=>{
返回
}
导出默认函数App（）{
const myref=useRef（null）；
const_handleClick=（）=>{
设ctx=myref.current.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（100100,32,32）；
}
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

或者，如果它真的是全局的，您可以使用localStorage来存储您的ref

你可以在handleClick中做一个检查，只是为了检查ref是否为null，这样就可以了，不需要使用useffect