添加点击事件后 不会做了！请老师讲解下，详细点
来源：6-7 完成案例文字图片显示和变换
山有夫苏
2019-08-26 15:21:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#main{
margin: 50px auto;
width: 1100px;
height: 460px;
background: #eee8da;
position: relative;
}
#form{
width: 340px;
height: 320px;
position: absolute;
top: 20px;
background: rgba(0,0,0,.3);
padding: 50px 30px;
text-align: center;
}
input{
width: 250px;
height: 30px;
margin: 12px 0;
border: none;
border-radius: 15px;
padding-left: 10px;
outline: none;
}
button{
margin-top: 35px;
width: 130px;
height: 30px;
border-radius: 15px;
background: #000;
color: #fff;
border: none;
outline: none;
text-align: center;
line-height: 30px;
}
#canvas{
position: absolute;
top: 20px;
right: 30px;
}
</style>
</head>
<body>
<div id="main">
<div id="form">
<input type="text" id="inp1" value="" placeholder="二维码"/>
<input type="text" id="inp2" value="" placeholder="姓名"/>
<input type="text" id="inp3" value="" placeholder="地址"/>
<input type="text" id="inp4" value="" placeholder="邮箱"/><br />
<button type="button" id="btn">生成名片</button>
</div>
<canvas id="canvas" width="650" height="420"></canvas>
</div>
<script type="text/javascript">
// DOM
var inputs = document.getElementsByTagName('input');
var btn = document.getElementById('btn');
// 获取画布上下文
var ctx = document.getElementById('canvas').getContext('2d');
// 创建矩形
ctx.fillStyle = '#fff';
ctx.fillRect(0,0,650,420);
// 创建背景图
var imgBg = new Image();
imgBg.src = 'image/bg.png';
imgBg.onload=function() {
ctx.drawImage(imgBg,0,0);
}
// 创建二维码
var imgEwm = new Image();
imgEwm.src = 'image/ewm.png';
imgEwm.onload=function() {
ctx.drawImage(imgEwm, 125,160, 85,85);
}
// 创建姓名
ctx.fillStyle = '#000';
ctx.font = '800 35px Microsoft JhengHei';
var name = '刘德华';
ctx.fillText(name,285,180)
// 创建地址
ctx.font = '20px Microsoft JhengHei';
var address = '上海市浦东区西京路00号千图总部';
ctx.fillText(address,285,240)
// 创建电话
var telephone = '+(000) 1234 5678';
ctx.fillText(telephone,285,270)
// 创建邮箱
var mailbox = 'qiantuwange@qiantuwang.com';
ctx.fillText(mailbox,285,300)
// 旋转文字
ctx.save();
ctx.beginPath();
ctx.rotate(-Math.PI/18);
ctx.fillStyle = 'red';
ctx.font = '15px Microsoft JhengHei';
var txt = 'canvas';
ctx.fillText(txt,500,500);
ctx.restore();
// 添加点击事件
btn.addEventListener('click',function(){
if(!inputs[0].value){
imgEwm.src = 'image/ewm.png';
}else{
imgEwm.src = inputs[0].value;
}
name = inputs[1].value;
console.log(inputs[1].value)
})
</script>
</body>
</html>写回答
1回答
-
同学，你好。
下载源码里面有提供参考代码，也加了重要部分的注释，可以做为参考。
以后如果遇到了不懂的地方，教你一个办法，进行效果的测试，去掉它之后的效果是什么样的，加上是什么样的，通过对比和测试，能弄明白很多问题，还有一些值你不知道是什么意思，那你可以在控制台输出一下就知道是什么意思了。先通过自己的努力去分析和实现，可以看别的同学的问题，也可以自己百度，如果实在弄不明白，你再来提问，这样你慢慢就能培养出自己解决问题的能力，有了这种能力，才能胜任以后的工作，没有解决问题的能力，会寸步难行，因为在实际的工作中，不论是基础的工程师，还是项目经理，发现问题，寻找解决方案，解决问题，是工作的常态。不过也不用担心，这种能力是可以慢慢培养的。加油！
如果帮助到了你，欢迎采纳！
祝学习愉快！
0
相似问题