画布不使用 react-creat-app 渲染图像

问题描述

我目前正在使用 create-react-app 和 canvas api 来渲染图像。我无法这样做。我不确定发生了什么，一切似乎都是正确的，但我不确定为什么图像没有出现。我已经检查了图像，所以我删除了显示没有图像显示的内容。

import generatorImage from './generator.jpg';

const Canvas = props => {

const canvasRef = useRef(null);
const imgRef = useRef(null);

useEffect(() => {
  const canvas = canvasRef.current;
  const img = imgRef.current;
  const context = canvas.getContext('2d');
  
  img.onload = () => {
    context.drawImage(img,10,10);
    context.font = "40px Courier";
    context.fillText('hello world',75);
  }
  

},[]);

return (
<>
  <canvas ref={canvasRef} style={{border:`1px solid black`}} height={cargoHeight}/>
  <img ref={imgRef} src={generatorImage} alt='cargotype' style={{display: 'none'}} />
</>
  )

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）