老师，我完成了作业，帮我看看吧

来源：9-3 完成案例动画部分
慕神7088389
2018-07-12 05:43:10
<!DOCTYPE html>
<html lang="en">
<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>Canvas案例作业</title>
<style>
* { margin: 0; padding: 0 }
body, html { height: 100% }

/* 左边 */
.infoArea { width: 35%; height: 100%; float: left; background: #a4a296 }
.infoArea form { width: 100%; height: 300px; margin-top: 200px }
.infoArea form input { display: block; width: 65%; height: 30px; outline: 0; border: 0; border-radius: 15px; margin: 30px auto; padding: 0 10px }
.infoArea form input[type=button] { width: 40%; background: #202020; color: #eee; cursor: pointer }
.infoArea form input[type=button]:hover { background: #000; color: #fff }

/* 右边 */
.cardArea { width: 65%; height: 100%; float: left; background: #eee9d3; text-align: center }
.cardArea canvas { margin-top: 230px }
#card { display: none; }

</style>
</head>
<body>
<!-- 左边 -->
<section class="infoArea">
<form action="" id="form">
<input type="text" placeholder="姓名">
<input type="text" placeholder="地址">
<input type="text" placeholder="职业">
<input type="text" placeholder="爱好">
<input type="button" value="生成名片">
</form>
</section>
<!-- 右边 -->
<section class="cardArea">
<canvas id="snow" width="600px" height="100px"></canvas>
<canvas id="card" width="600px" height="100px"></canvas>
</section>
</body>
<script>
var canvas=document.getElementById('card')
var ctx=canvas.getContext('2d')
var snowCanvas=document.getElementById('snow')
var snowCtx=snowCanvas.getContext('2d')

// 名片基本背景
var cardBase=function(){
var linearGradient=ctx.createLinearGradient(0,50,600,50)
linearGradient.addColorStop(.4,'#000')
linearGradient.addColorStop(1,'#bbb')
ctx.fillStyle=linearGradient
ctx.fillRect(0,0,canvas.width,canvas.height)

var img=new Image()
img.src='../img/logo.png'
img.onload=function(){
ctx.drawImage(img,10,10,80,80)
}
}
cardBase()

// 名片文字自动生成
var form=document.getElementById('form')
var inputs=form.getElementsByTagName('input')
var button=form.getElementsByTagName('input')[4]
var str1='请输入姓名'
var str2='请输入地址'
var str3='请输入职业'
var str4='请输入爱好'
var text=function(){
ctx.font='bold 30px Mircosoft YaHei'
ctx.textBaseline='top'
ctx.fillStyle='#fff'
ctx.fillText(str1,100,0)

ctx.font='18px Mircosoft YaHei'
ctx.fillText(str2,100,40)
ctx.fillText(str3,100,70)

// str4爱好部分
// 先save后restore，避免影响之前的与之后新生成的内容
ctx.save()
ctx.beginPath()
ctx.font='bold 20px Mircosoft YaHei'
ctx.textBaseline='bottom'
// 针对str4设置坐标及旋转
ctx.translate(0,50)
ctx.rotate(-Math.PI/30)
// 设置阴影
ctx.shadowOffsetX=15
ctx.shadowOffsetY=10
ctx.shadowColor='rgba(0,0,0,.4)'
ctx.shadowBlur=3

var width1=ctx.measureText(str1).width
var width2=ctx.measureText(str2).width*(2/3)
var width3=ctx.measureText(str3).width*(2/3)
var width4=ctx.measureText(str4).width
var maxWidth=Math.max(width1,width2,width3)
// 设置线性渐变
var linearGradient=ctx.createLinearGradient(350,50,600,50)
linearGradient.addColorStop(0,'red')
linearGradient.addColorStop(.2,'orange')
linearGradient.addColorStop(.4,'deepskyblue')
linearGradient.addColorStop(.6,'cyan')
linearGradient.addColorStop(.8,'pink')
linearGradient.addColorStop(1,'purple')
ctx.fillStyle=linearGradient
// 以及爱好下的曲线部分
ctx.lineWidth = 1
ctx.strokeStyle = linearGradient
ctx.beginPath()

// 当maxWidth大于100时，str4与曲线相对位移，曲线根据文本长度定义自身长度
// console.log(maxWidth,width4)
if(maxWidth>100){
ctx.fillText(str4,250+maxWidth,50)
ctx.moveTo(250+maxWidth, 65)
ctx.quadraticCurveTo(260+maxWidth, 46, 360+width4+(maxWidth-100), 52)
}else{
ctx.fillText(str4,350,50)
ctx.moveTo(350, 65)
ctx.quadraticCurveTo(360, 46, 360+width4, 52)
}
ctx.stroke()

ctx.restore()
}
text()

// 雪花飘落效果
var snowDrop=function(){
// 从数组中挑选随机数的方法
var randomNum=function(arr){
return arr[Math.floor(Math.random()*arr.length)]
}

// 为每个雪花的x、y坐标，半径，下落速度4个属性设置空数组
// 此段变量声明不能放到计时器中，否则数组数值将不断重置
var posX=[]
var posY=[]
var snowSize=[]
var dropSpeed=[]

setInterval(function(){
// 清空画布
snowCtx.clearRect(0,0,snowCanvas.width,snowCanvas.height)
// 绘制card离屏部分作为背景
snowCtx.drawImage(canvas,0,0,canvas.width,canvas.height,0,0,snowCanvas.width,snowCanvas.height)

// 为每个属性遍历添加和保存数值，长度为11，雪花个数也为11
for(var i=0; i<=10; i++){
// 关键点，当每个雪花属性值都不存在时（完成动画），才会补充新的数值,重新绘制。未完成动画的不会被中途改变属性值。
if(!posX[i] && !posY[i] && !snowSize[i] && !dropSpeed[i]){
// 数组内容与长度预定义，对雪花动画整体效果进行自定义
posX[i]=i*60
var y=[0,-10,-20,-30]
posY[i]=randomNum(y)
var size=[1,2,4,6]
snowSize[i]=randomNum(size)
var speed=[1,2,3]
dropSpeed[i]=randomNum(speed)
}
// 可以通过控制台对比动画进度来查看数值的变化情况
// 注意数组中null的出现与消失
// console.log(snowSize)

// 使用每个属性数组数值绘制雪花
snowCtx.beginPath()
snowCtx.arc(posX[i],posY[i],snowSize[i],0,2*Math.PI)
snowCtx.fillStyle='rgba(255,255,255,.5)'
snowCtx.fill()

// 每个雪花单独的下落速度
posY[i]+=dropSpeed[i]

// 每个雪花下落超出画布之外清除其对应属性数值
// 下一次for循环再为其补充属性数值
if(posY[i]>snowCanvas.height+snowSize[i]*2){
posX[i]=null
posY[i]=null
snowSize[i]=null
dropSpeed[i]=null
}
}
},100)
}
snowDrop()

// 用户输入信息转化
var create=function(){
str1=inputs[0].value
str2=inputs[1].value
str3=inputs[2].value
str4=inputs[3].value

str1===''?str1='请输入姓名':str1=inputs[0].value
str2===''?str2='请输入地址':str2=inputs[1].value
str3===''?str3='请输入职业':str3=inputs[2].value
str4===''?str4='请输入爱好':str4=inputs[3].value

// 先清空画布
ctx.clearRect(0,0,canvas.width,canvas.height)

// 重新生成新的内容
cardBase()
text()
}

// 按钮绑定事件
button.addEventListener('click',create)
</script>
</html>
图片为本地路径需要替换。
写回答
1回答