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

报告相同问题？

悬赏问题

  • ¥15 delta降尺度计算的一些细节，有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯，灯的闪烁很不稳定，经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序