我正在尝试使用我的 pv() 函数合并两个图像。问题是，我看不出我在做什么错。我只看到在我的合并图像应该出现的地方是否有一个空白框。在调试方面，我尝试了几乎所有我知道的方法，但总是失败。
这是我在我的浏览器中看到的:
这是我的 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方法:
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/
关于javascript - 为什么我的合并图像 Canvas 不显示？ (ReactJS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41922099/