老师，我这个怎么高度不累加呀，小球跳来跳去
来源：9-3 完成案例动画部分
李知恩
2020-05-07 21:05:24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/6-7.css">
</head>
<body>
<div class="container">
<div class="left-part">
<form>
<input type="text" placeholder="姓名" id="name">
<input type="text" placeholder="地址" id="address">
<input type="text" placeholder="职业" id="job">
<input type="text" placeholder="口号" id="text">
<button type="button" id="btn">生成名片</button>
</form>
</div>
<div class="right-part">
<canvas id="canvas" class="canvas" width="600px" height="100px">
您的浏览器不支持canvas！
</canvas>
<canvas id="snow" class="snow" width="600px" height="100px">
您的浏览器不支持canvas！
</canvas>
</div>
</div>
<script type="text/javascript" src="js/6-7.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
}
.container{
width: 1200px;
height: 400px;
margin: 0 auto;
margin-top: 200px;
}
.container .left-part{
width: 400px;
height: 400px;
background-color: #adaca3;
float: left;
}
.container .left-part form{
width: 340px;
height: 300px;
margin: 0 auto;
margin-top: 50px;
position: relative;
}
.container .left-part input{
width: 340px;
height: 35px;
display: block;
border-radius:50px;
margin-top: 30px;
}
.container .left-part button{
width: 100px;
height: 35px;
background-color: #000;
text-align: center;
color: #fff;
border-radius: 30px;
margin-top: 30px;
position: absolute;
left: 50%;
margin-left: -50px;
}
.container .left-part input::-webkit-input-placeholder{
padding-left: 20px;
}
.container .right-part{
width: 800px;
height: 400px;
background-color: #efeddc;
float: left;
position: relative;
}
.container .right-part .snow{
position: absolute;
left: 50%;
margin-left:-300px;
margin-top: 100px;
color: #fff;
}
.container .right-part .canvas{
display: none;
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var str =["请输入姓名","请输入地址","请输入职业","请输入口号"];
//背景
function bg(){
ctx.save();
var linearGradient = ctx.createLinearGradient(0,50,600,50);
linearGradient.addColorStop(0.6,'#000');
linearGradient.addColorStop(1,'rgba(255,255,255,0.4)');
ctx.fillStyle=linearGradient;
ctx.fillRect(0,0,600,100);
var img = new Image();
img.src="image/IMG_9620.JPG";
img.onload=function(){
ctx.restore();
ctx.drawImage(img,420,0,100,100,0,0,100,100);
};
}
bg();
function text(){
//姓名
ctx.font="bold 30px sans-serif";
ctx.textBaseline="top";
ctx.fillStyle="#fff";
ctx.fillText(str[0],110,8);
//地址
ctx.font="bold 20px sans-serif";
ctx.textBaseline="top";
ctx.fillStyle="#fff";
ctx.fillText(str[1],110,45);
//职业
ctx.font="bold 20px sans-serif";
ctx.textBaseline="top";
ctx.fillStyle="#fff";
ctx.fillText(str[2],110,70);
//口号
//根据长度变化进行位置变化
var width = ctx.measureText(str[0]).width;
var width1 = ctx.measureText(str[1]).width;
var width2 = ctx.measureText(str[2]).width;
var width3 = ctx.measureText(str[3]).width;
var maxWidth=Math.max(width,width1,width2);
ctx.font="bold 20px sans-serif";
ctx.textBaseline="middle";
ctx.fillStyle="#fff";
ctx.save();
if(maxWidth<200){
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=10;
ctx.shadowColor="rgba(0,0,0,0.5)";
ctx.shadowBlur=2;
ctx.translate(400,50);
ctx.rotate(-Math.PI/18);
ctx.fillText(str[3],0,0);
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.quadraticCurveTo(width/3,10, width3, 25);
ctx.stroke();
}else{
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=10;
ctx.shadowColor="rgba(0,0,0,0.5)";
ctx.shadowBlur=2;
ctx.translate(450,50);
ctx.rotate(-Math.PI/18);
ctx.fillText(str[3],0,0);
ctx.strokeStyle = "#fff";
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.quadraticCurveTo(width/3,10, width3, 25);
ctx.stroke();
}
ctx.restore();
}
text();
//用户输入文字替换
var btn = document.getElementById("btn");
var info =document.getElementsByTagName("input");
function textChange(){
for(var i=0;i<4;i++){
if(info[i].value != ""){
str[i] = info[i].value;
}
}
ctx.clearRect(0,0,canvas.width,canvas.height);
bg();
text();
}
btn.addEventListener('click',textChange);
//雪花绘制
var snow = document.getElementById("snow");
var snowCtx = snow.getContext("2d");
var num =[];
var posx = 20;
var posy = 20;
setInterval(function(){
snowCtx.beginPath();
snowCtx.clearRect(0,0,snow.width,snow.height);
snowCtx.drawImage(canvas,0,0,canvas.width,canvas.height,0,0,snow.width,snow.height);
for(var i=0;i<=10;i++){
snowCtx.beginPath();
num[i] = Math.random();
var r=num[i]*10,
posx = num[i]*600,
vy = num[i]*10;
snowCtx.arc(posx,posy,r,0,2*Math.PI,true);
snowCtx.fillStyle="rgba(255,255,255,0.5)";
snowCtx.fill();
posy += vy;
if(posy>= snow.height){
posy=20;
}
}
},1000);
1回答
-
同学你好，代码10个小球都用了一个垂直坐标posy，并且定时器执行一次每个小球的水平坐标也是改变的，所以小球是跳动的。
建议按照视频中修改，一个小球对应着一个垂直坐标，当一个小球满足到达底部条件的时候，清空当前小球的数据，重新赋值，参考
//雪花绘制 var snow = document.getElementById("snow"); var snowCtx = snow.getContext("2d"); var num = []; // var posx = 20; // var posy = 20; setInterval(function() { snowCtx.beginPath(); snowCtx.clearRect(0, 0, snow.width, snow.height); snowCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, snow.width, snow.height); for (var i = 0; i <= 10; i++) { // 添加判断 if (!num[i]) { num[i] = {}; num[i].r = Math.floor(Math.random() * 5) + 1; num[i].posy = -num[i].r - Math.floor(Math.random() * 10); num[i].posx = i * 60 + Math.floor(Math.random() * 10) - 5; num[i].vy = Math.floor(Math.random() * 5) + 1; } snowCtx.beginPath(); snowCtx.arc(num[i].posx, num[i].posy, num[i].r, 0, Math.PI * 2); snowCtx.fillStyle = "rgba(255, 255, 255, 0.5)"; snowCtx.fill(); num[i].posy += num[i].vy; if (num[i].posy > snow.height + num[i].r * 2) { num[i] = undefined; } } }, 100);自己再测试下，祝学习愉快！
0
相似问题