为什么生成名片不会清楚以前的数据
来源：7-1 Canvas剪辑区域
想取的名字都被占了
2018-04-03 22:30:38
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="content ">
<div class="left">
<div class="list">
<ul>
<li><input type="text" name="name" placeholder="姓名"></li>
<li><input type="text" name="dress" placeholder="地址"></li>
<li><input type="text" name="job" placeholder="职业"></li>
<li><input type="text" name="kh" placeholder="口号"></li>
</ul>
</div>
<div class="btn"><button>生成名片</button></div>
</div>
<div class="right">
<canvas id="canvas" width="600" height="300">你的浏览器不支持canvas</canvas>
</div>
</div>
<script type="text/javascript" src="js.js">
</script>
</body>
</html>
//css
*{
padding: 0;
margin: 0;
font-size: 12px;
}
.content{
width: 900px;
height: 300px;
margin: 100px auto;
}
.left{
width: 300px;
height: 300px;
background: #9d9c91;
float: left;
}
.left ul{
list-style-type: none;
}
.list{
margin: 0 auto;
}
.list li{
width: 270px;
height: 32px;
border: 1px solid gray;
border-radius: 15px;
text-align: center;
background: white;
margin: 20px 0 0 12px;
}
input{
width: 250px;
height: 26px;
border: none;
margin-top:3px;
}
input:focus{outline:0;}
.btn{
width: 300px;
text-align: center;
}
.btn button{
width: 100px;
height: 30px;
border-radius: 15px;
margin-top: 20px;
border: 1px solid gray;
line-height: 30px;
color: white;
background: black;
}
.right{
width: 600px;
height: 300px;
background: #eae6ce;
float: right;
}
//js
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//底图颜色渐变
var LinearGradient=ctx.createLinearGradient(80,80,500,100);
LinearGradient.addColorStop(0,"black");
LinearGradient.addColorStop(1,"#626261");
ctx.fillStyle=LinearGradient;
ctx.rect(80,80,420,80);
ctx.fill();
//canvas文字
var write1=function (){
ctx.fillStyle="white";
ctx.save();
ctx.font="bold 20px sans-serif";
ctx.fillText(name,200,110);
ctx.restore();
ctx.font="bold 15px sans-serif";
ctx.fillText(dress,200,130);
ctx.font="bold 15px sans-serif";
ctx.fillText(job,200,150);
ctx.save();
ctx.rotate(-Math.PI/18);
ctx.fillText(kh,350,200);
ctx.restore();
};
//logo
var img=new Image();
img.src="logo.png";
img.onload=function () {
ctx.drawImage(img,80,80,80,80);
};
//未生成名片
var key=false;
if (!key) {
var name="请输入姓名";
var dress="请输入地址";
var job="请输入职业";
var kh="请输入口号";
write1();
}
//生成名片
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function (){
//ctx.clearRect(60,40,200,40)
var input=document.getElementsByTagName("input");
name=input[0].value;
dress=input[1].value;
job=input[2].value;
kh=input[3].value;
write1();
}
1回答
-
怎么都被占用了呢
2018-04-04
因为，每次点击生成名片时，都要清空一下画布，然后重新绘制渐变背景，logo图片等。如下所示：
0
相似问题
回答 2
回答 1