Question

在我的index.js文件中，我尝试将两个图像与pv()函数合并在一起。每当我点击cmd + s - ＆gt; cmd + r要重新加载页面，它只是完全空白。换句话说，我的代码搞砸了。如何显示合并后的图像？

这是我的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://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');
     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">
          <h1><u>Portfolio</u></h1>
            <img className="img-responsive img-thumbnail pv"></img>
            <img className="img-responsive img-thumbnail" src="https://image.flaticon.com/teams/1-freepik.jpg"></img>
            <img className="img-responsive img-thumbnail" src="https://image.flaticon.com/teams/1-freepik.jpg"></img>
            <img className="img-responsive img-thumbnail" src="https://image.flaticon.com/teams/1-freepik.jpg"></img>
            <img className="img-responsive img-thumbnail" src="https://image.flaticon.com/teams/1-freepik.jpg"></img>
        </div>

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

        <div className="scrollToContact">
          <h1><u>Contact</u></h1>
          <h2>Contact info and what not</h2>
        </div>

      </div>
    );
  }
});

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

以下是errors我得到的内容：

Uncaught SyntaxError: http://127.0.0.1:8080/index.js: Unexpected token (39:2)
at Parser.pp.raise (browser.js:2027)
at Parser.pp.unexpected (browser.js:2596)
at Parser.pp.expect (browser.js:2590)
at Parser.pp.parseObj (browser.js:1447)
at Parser.pp.parseExprAtom (browser.js:1250)
at Parser.parseExprAtom (browser.js:26392)
at Parser.pp.parseExprSubscripts (browser.js:1097)
at Parser.pp.parseMaybeUnary (browser.js:1079)
at Parser.pp.parseExprOps (browser.js:1035)
at Parser.pp.parseMaybeConditional (browser.js:1018)
http://127.0.0.1:8080/favicon.ico Failed to load resource: the server             responded with a status of 404 (Not Found)

Answer 1

getContext函数应该应用于canvas元素。

<canvas className="img-responsive img-thumbnail pv"></canvas>

我们需要将此函数应用于单个元素：

document.getElementsByClassName('pv')[0]

为什么不会出现我的合并图像（ReactJS）？

1 个答案: