请问canvas在React里面无法画图是为什么?

写了方法函数,但是没有效果,请问可能是什么原因?图片说明

4个回答

react呀,写了一个,看看有没有借鉴意义
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>
<div id="example"></div>
<script type="text/babel">
class TestCanvas extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.draw();
  }
  draw(){
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.clearRect(45,45,60,60);
      ctx.strokeRect(50,50,50,50);
    }
  render() {
    return (
      <div>
        <h1>Hello, Canvas!</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <TestCanvas />,
  document.getElementById('example')
);

</script>

</body>
</html>
Eternity_twinkle
Eternity_twinkle 我在回答里面放了结构图。。能不能帮我看一下是为什么没有效果?
接近 2 年之前 回复
Eternity_twinkle
Eternity_twinkle 麻烦能不能其他方式帮我看一下,才接触js跟React一个月。。。。完全找不到问题重点在哪
接近 2 年之前 回复
Eternity_twinkle
Eternity_twinkle 评论不能放图。。。跟你写的差不多,但是就是没有效果,实在找不到问题出在哪里
接近 2 年之前 回复
Eternity_twinkle
Eternity_twinkle 最后加上这种export default myConnect(state => ({}))(TradingCenter)
接近 2 年之前 回复
Eternity_twinkle
Eternity_twinkle 为什么你们都是这样写的。。。我是直接写在return里面的
接近 2 年之前 回复
 上面只是定义一个方法,需要调用方法
 draw();
Eternity_twinkle
Eternity_twinkle 有画布就是画不上去,搞不清楚问题出在哪里,方法已经运行了,但是就是不知道为什么没有效果,都快要抓狂了
接近 2 年之前 回复
Eternity_twinkle
Eternity_twinkle 我调用了,渲染之后调用的:componentDidMount() {this.draw()},但是还是没效果
接近 2 年之前 回复

是因为画的图形画早了,画完之后才去获取画布的,已经解决

qq_33312007
qq_33312007 怎么解决的 大兄得 代码贴出来 遇到同样问题 必须殿下刷新才出来我的是
一年多之前 回复

结构大概是这样的,但是没有效果,请问能知道原因吗?图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐