为什么我的合并图像画布不会出现？（反应JS）答案

【问题标题】：Why won't my canvas of merged images appear? (ReactJS)为什么我的合并图像画布不会出现？（反应JS）
【发布时间】：2017-01-29 14:41:39
【问题描述】：

我正在尝试将两个图像与我的pv() 函数合并。问题是，我看不出我在这里做错了什么。我所看到的只是我的合并图像应该出现的位置是否有一个空白框。在调试方面，我几乎尝试了我所知道的所有方法，但总是做得不够。

这是我在browser 中看到的内容：

这是我的index.html 文件：

<!DOCTYPE html>
<html>

  <head>
     <title>My practice web app</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="index.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/react@15/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  </head>

  <body>
    <div id="firstBar"></div>

    <script type="text/babel" src="index.js"></script>

  </body>

</html>

这是我的index.js 文件：

var Website = React.createClass({

   scrolling: function() {
     $('html,body').animate({
         scrollTop: $(".scrollToPortfolio").offset().top
        },'slow');
   },

   scrollToAbout: function() {
     $('html,body').animate({
       scrollTop: $(".scrollToAbout").offset().top
     },'slow');
   },

   scrollToContact: function() {
     $('html,body').animate({
       scrollTop: $(".scrollToContact").offset().top
     },'slow')
   },

    pv: function() {
      var c = document.getElementsByClassName('pv')[0];
      var ctx = c.getContext("2d");
      var catering1 = new Image();
      var contact1 = new Image();

    catering1.src = "./catering1.png";
      catering1.onload = function() {
        ctx.drawImage(catering1,0,0,328,526);
        contact1.src = "./contact1.png";
        contact1.onload = function() {
          ctx.drawImage(contact1,0,0,328,526);
        }
      }
    },

  render: function() {
    return(

      <div className="container">
      <kbd className="fullName">My practice web app</kbd>
        <button onClick={this.scrolling} type="button" className="btn btn-primary portfolio">Portfolio</button>
        <button onClick={this.scrollToAbout} type="button" className="btn btn-primary about">About</button>
        <button onClick={this.scrollToContact}type="button" className="btn btn-primary contact">Contact</button>

        <div className="trainPic">
        <img src={"./pictures/myPic3.JPG"} className="myPic"></img>
        </div>

        <div className="scrollToPortfolio">
          <h2><u>Portfolio</u></h2>
            <canvas className="img-responsive img-thumbnail pv"></canvas>
        </div>

        <div className="scrollToAbout">
          <h2><u>About</u></h2>
          <h2>Text</h2>
          <h2>Text</h2>
        </div>

        <div className="scrollToContact">
          <h2><u>Contact</u></h2>
          <h1 className="number">(333) 333 3333</h1>
          <strong className="email"><a href="mailto:someemail">someEmail@email.com</a></strong>
           <p className="jumbotron">
            <a className="btn btn-social-icon btn-lg btn-github githubIcon ">
             <span className="fa fa-github"></span>
           </a>
          </p>
        </div>



      </div>
    );
  }
});

ReactDOM.render(<Website/>, document.getElementById('firstBar'));

【问题讨论】：

你在哪里调用你的pv函数？？
How come my canvas isn't appearing?的可能重复
@MayankShukla 这是<canvas className="img-responsive img-thumbnail pv"></canvas>的类名
请编辑您之前的问题，而不是重新打开新问题。
@Kaiido 对此感到抱歉。

标签： javascript html css reactjs canvas

【解决方案1】：

试试这个pv方法：

pv: function() {
    var c = document.getElementsByClassName('pv')[0];
    var ctx = c.getContext("2d");
    var img1 = new Image();
    var img2 = new Image();
    img1.src = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png';   
    img1.onload = function(){
        ctx.drawImage(img1,0,0,328,526);
          img2.src = "http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg";
          img2.onload = function(){
              ctx.globalAlpha = 0.4; // added this line
              ctx.drawImage(img2,0,0,328,526);
          }         
    };         
},

检查jsfiddle上的工作代码：https://jsfiddle.net/ddz7on3e/

【讨论】：