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

时间:2021-04-23 09:08:41

标签: javascript reactjs canvas create-react-app drawimage

我目前正在使用 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', 0, 75);
  }
  

}, []);

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

}

0 个答案:

没有答案
相关问题