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

请问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条)

相关推荐 更多相似问题