页面总是闪烁，加载不出来最终效果

来源：9-3 完成案例动画部分

lhebe

2019-04-08 15:31:38

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:1200px;height:400px;margin:100px auto;
background: #bfb;
}
.left{
background: rgba(0,0,0,.4);
width:500px;float: left;
height:100%;
}
.left input{
display: block;
margin-left:50px;
margin-top:30px;
line-height: 30px;
width:370px;height:30px;
border-radius: 30px;
border:0;
padding-left:30px;
}
.left input:nth-child(1){
margin-top: 50px;;
}
.left button{display: block;
width:100px;height:30px;background: #000;color:#fff;
border:0; margin:30px auto;border-radius: 30px;cursor: pointer;
}
.left button:hover{
background: #222;color:#fff;
}
.right{
width:700px;height:100%;position: relative;
background: #eee9d3;text-align: center;float: left;
}
.right canvas {
position: absolute;
top: 150px;
left: 50%;
margin-left: -300px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<form>
<input type="text" placeholder="姓名" id="one"/>
<input type="text" placeholder="地址" id="two"/>
<input type="text" placeholder="单位" id="three"/>
<input type="text" placeholder="口号" id="four"/>
<button id="btn">生成名片</button>
</form>
</div>
<div class="right">
<canvas id="ds"></canvas>
<canvas id="fd"></canvas>
</div>
</div>
<script>
var con=document.getElementById('ds'),
cxt=con.getContext('2d')
cxt.canvas.width=600;
cxt.canvas.height=100;
var img=new Image();
img.src='images/logo.png';
img.onload=function(){
cxt.drawImage(img,10,10);
}
var btn=document.getElementById('btn');
btn.onclick=function(){
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
var linear=cxt.createLinearGradient(0,0,cxt.canvas.width,cxt.canvas.height);
linear.addColorStop(0.5,'rgb(0,0,0)');
linear.addColorStop(1,'rgb(133,133,133)');
cxt.fillRect(0,0,cxt.canvas.width,cxt.canvas.height);
cxt.fillStyle=linear;
cxt.fillRect(0,0,cxt.canvas.width,cxt.canvas.height);
cxt.drawImage(img, 10, 10);
//获取文本内容
var name=document.getElementById('one').value||'请输入姓名';
var address=document.getElementById('two').value||'请输入地址';
var job=document.getElementById('three').value||'请输入职业';
var nameWdith,addressWidth,jobWidth,maxWidth=0;
cxt.font='bold 26px sans-serif';
cxt.fillStyle='#fff';
cxt.fillText(name,105,35);
nameWdith=cxt.measureText(name).width;
cxt.font='bold 20px sans-sserif';
cxt.fillText(address,105,65);
cxt.fillText(job,105,95);
addressWidth=cxt.measureText(address).width;

jobWidth=cxt.measureText(job).width;
if(maxWidth<nameWdith){
maxWidth=nameWdith
}
if(maxWidth<addressWidth){
maxWidth=addressWidth;
}
if(maxWidth<jobWidth){
maxWidth=jobWidth;
}
//绘制口号
var slogan=document.getElementById('four').value||'请输入口号';
cxt.save();
//图形变换
cxt.rotate(-0.1);
cxt.translate(0,50);
//阴影
cxt.shadowOffsetX=10;
cxt.shadowOffsetY=10;
cxt.shadowBlur=1.5;
cxt.fillStyle='#ddd';
//计算口号位置
var sloganWidth;
sloganWidth=cxt.measureText(slogan).width;
var offset=(cxt.canvas.width-115-maxWidth-sloganWidth)/2;
cxt.fillText(slogan,115+maxWidth+offset,50);
//画曲线
cxt.beginPath();
cxt.moveTo(115+maxWidth+offset,70);
cxt.quadraticCurveTo(115+maxWidth+offset,50,115+sloganWidth
+maxWidth+offset,60);
cxt.fillStyle="#ddd";
cxt.stroke();
cxt.restore();
}
//触发事件
btn.click();
//创建和设置离屏技术
var df=document.getElementById('fd');
var cx=df.getContext('2d');
cx.canvas.width=600;
cx.canvas.height=100;
var circles = [];
setInterval(function(){
//查处画布
cx.clearRect(0,0,cx.canvas.width,cx.canvas.height);
//引进离屏内容
cx.drawImage(con,0,0,cxt.canvas.width,cxt.canvas.height,0,0,
cx.canvas.width,cx.canvas.height);
//绘制下落的圆
for(var i=0;i<=10;i++){
if(!circles[i]){
circles[i].radius=Math.floor(Math.random()*5)+1;//半径
circles[i].y=- circles[i].radius-Math.floor(Math.random()*10);
circles[i].x=i*60+Math.floor(Math.random()*10)-5;
circles[i].vy=Math.floor(Math.random()*5)+1;
}
cx.beginPath();
cx.arc(circles[i].x,circles[i].y,circles[i].radius,0,2*Math.PI);
cx.fillStyle='rgba(255,255,255,0.5)';
cx.fill();
circles[i].y=circles[i].y+circles[i].vy;
if(circles[i].y>cx.canvas.height+circles[i].radius*2){
circles[i] = undefined;
}
}
},100);
</script>
</body>
</html>