Eternity_twinkle 2018-09-30 05:29 采纳率: 100%
浏览 2559
已采纳

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

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

  • 写回答

5条回答 默认 最新

  • danielinbiti 2018-09-30 06:14
    关注
    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？