老师，为什么我这个会一直刷新?

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

慕用2417543

2018-10-26 05:44:26

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example</title>
<style type="text/css">
*{margin:0;padding: 0;}

body,html{width: 100%;height:100%;}
    .left{ width:35%;height:100%;background-color:#a4a296;float:left;}
    .right{width:65%;height:100%;background-color:#eee9d3;float:left;} 
    .left form{padding-top: 100px;}
input,button{width: 65%;height: 30px;display: block;border-radius: 15px;margin:30px auto; border: 0;outline:0;padding:0 10px;
}
button{width:25%;background-color:#202020;text-align:center;color:#eee;cursor: pointer;}
canvas{margin:200px 0px 0 200px;}
#canvas{display: none;}
</style>
</head>
<body>
<section class="left">
<form > 
<input type="text" name="name" placeholder="姓名" id="name" />
<input type="text" name="address" placeholder="地址" id="address" />
<input type="text" name="job" placeholder="职业" id="job" />
<input type="text" name="slogan" placeholder="口号" id="slogan" />
<button id="generateBtn">生成名片</button>
</form>
</section>
<section class="right">
<canvas id="canvas"></canvas>
<canvas id="canvas1"></canvas>
</section>
<script type="text/javascript">
//离屏
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
    ctx.canvas.width = 500;
        ctx.canvas.height = 100;
    //渐变
    var generateBtn = document.getElementById("generateBtn");
    generateBtn.onclick = function() {
    var linear=ctx.createLinearGradient(0,0,ctx.canvas.width,ctx.canvas.height);
    linear.addColorStop(0.5,"black");
    linear.addColorStop(1,"#ddd");
    ctx.fillStyle=linear;
    ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
    //logo
    var img=new Image();
    img.src="http://climg.mukewang.com/59859f4d00014f1503000100.jpg";
    img.onload=function(){ctx.drawImage(img,20,0,90,100,0,0,90,100);}
     
    var name=document.getElementById("name").value||"请输入姓名";
    var address=document.getElementById("address").value||"请输入地址";
    var job=document.getElementById("job").value||"请输入职业";
  
   //文字
    ctx.fillStyle="white";   
    ctx.font="bold 16px 微软雅黑";
    ctx.fillText(name,135,30);  
    ctx.font="14px 微软雅黑";
    ctx.fillText(address,135,55); 
    ctx.fillText(job,135,80);

    var nameWidth,addressWidth,jobWidth,maxWidth=0;
    nameWidth=ctx.measureText(name).width;
    addressWidth=ctx.measureText(address).width;
    jobWidth=ctx.measureText(job).width;
    if(maxWidth<nameWidth){maxWidth=nameWidth;}
    if(maxWidth<addressWidth){maxWidth=addressWidth;}
    if(maxWidth<jobWidth){maxWidth=jobWidth;}
    //阴影——文字、曲线
    var slogan=document.getElementById("slogan").value||"请输入口号";
    ctx.save();
    ctx.shadowOffsetX=9;
    ctx.shadowOffsetY=6;
    ctx.shadowColor='rgba(0,0,0,.4)';
    ctx.shadowBlur=2;
    //口号
    ctx.rotate(-Math.PI/50);
    ctx.font="16px 宋体";
    ctx.fillStyle="white";
    ctx.fill(); 
    //计算口号位置
    var solganWidth = ctx.measureText(slogan).width;
    var offset = (ctx.canvas.width - 225 - maxWidth -solganWidth) / 2;
    ctx.fillText(slogan, 225 + maxWidth + offset, 80);
    //曲线
    ctx.beginPath();
    ctx.moveTo(225 + maxWidth + offset,100);
    ctx.quadraticCurveTo(225 + maxWidth + offset,80,225 + maxWidth + offset+solganWidth,80);
    ctx.strokeStyle="white";
    ctx.stroke();
    ctx.restore();}

    generateBtn.click();

    //小球效果
    var canvas1=document.getElementById("canvas1");
    var ctx1=canvas1.getContext("2d");
        ctx1.canvas.width = 500;
        ctx1.canvas.height = 100;

var circles=[];
setInterval(function(){
ctx1.fillRect(0,0,ctx1.canvas.width,ctx1.canvas.height);
ctx1.drawImage(canvas,0,0,ctx.canvas.width,ctx.canvas.height,0,0,ctx1.canvas.width,ctx1.canvas.height);
for(var i=0;i<=10;i++){
if (!circles[i]) {
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;
    }
ctx1.beginPath();
ctx1.arc(circles[i].x,circles[i].y,circles[i].radius,0,Math.PI*2);
ctx1.fillStyle="rgba(255,255,255,0.5)";
ctx1.fill();
circles[i].y=circles[i].y+circles[i].vy;
if (circles[i].y>ctx1.canvas.height+circles[i].radius*2) {
circles[i]=undefined;
}
}
},100);
</script>
</body>
</html>

写回答

1回答