请老师检查，雪花的绘制是看了老师的源码案例才想到，不完全是自己写出来的能达到学习效果吗？
来源：9-3 完成案例动画部分
龍巛幽
2020-03-20 18:43:09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas案例</title>
<style>
.content{
width: 1000px;
height: 285px;
margin: 100px auto;
}
.input-content{
width: 300px;
height: 248px;
background-color: #a4a19a;
padding-top: 37px;
float: left;
}
.text{
width: 255px;
height: 23px;
font-size: 10px;
background-color: #fff;
padding-left: 10px;
border: none;
border-radius: 12px;
outline: none;
margin: 0 18px 22px;
}
.submit{
width: 84px;
height: 23px;
font-size: 10px;
background-color: #232124;
border-radius: 12px;
border: none;
outline: none;
color: #fff;
margin-left: 108px;
cursor: pointer;
}
.canvas-content{
width: 700px;
height: 100%;
background-color: #f0e9d6;
float: left;
}
.card{
margin: 75px 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="input-content">
<input type="text" class="text" placeholder="姓名" id="name" autocomplete="off" maxlength="6">
<input type="text" class="text" placeholder="地址" id="adds" autocomplete="off" maxlength="10">
<input type="text" class="text" placeholder="职业" id="work" autocomplete="off" maxlength="10">
<input type="text" class="text" placeholder="口号" id="slogan" autocomplete="off" maxlength="10">
<button class="submit" id="subBtn">生成名片</button>
</div>
<div class="canvas-content">
<canvas class="card" id="animationCanvas" width="500px" height="76px">
您的浏览器不支持canvas
</canvas>
<canvas class="card" id="canvas" width="500px" height="76px" style="display: none;">
您的浏览器不支持canvas
</canvas>
</div>
</div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var btn = document.getElementById('subBtn'),
nameNode = document.getElementById('name'),
addsNode = document.getElementById('adds'),
workNode = document.getElementById('work'),
sloganNode = document.getElementById('slogan');
//设置btn点击事件
btn.onclick = function () {
if(nameNode.value != /\s+/.exec(nameNode.value) && addsNode.value != /\s+/.exec(addsNode.value) && workNode.value != /\s+/.exec(workNode.value) && sloganNode.value != /\s+/.exec(sloganNode.value)){
ctx.clearRect(0, 0, canvas.width, canvas.height);
var nameStr = nameNode.value || '请输入姓名',
addsStr = addsNode.value || '请输入地址',
workStr = workNode.value || '请输入职业',
sloganStr = sloganNode.value || '请输入口号';
//创建canvas渐变色背景
var linearGradient = ctx.createLinearGradient(0,38,500,38);
linearGradient.addColorStop(0,'#000');
linearGradient.addColorStop(.5,'#000');
linearGradient.addColorStop(1,'grey');
ctx.fillStyle = linearGradient;
ctx.fillRect(0,0,canvas.width,canvas.height);
//设置图片
var img = new Image();
img.src = 'http://climg.mukewang.com/59859f4d00014f1503000100.jpg';
img.onload = function () {
ctx.drawImage(img,20,11,80,81,0,0,78,78);
}
//设置文字
ctx.fillStyle = '#fff';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.save();
ctx.font = 'bold 22px 微软雅黑';
ctx.fillText(nameStr,93,10);
ctx.restore();
ctx.save();
ctx.font = 'bold 14px 微软雅黑';
ctx.fillText(addsStr,93,37);
ctx.fillText(workStr,93,56);
//获取name长度 设置基础值和增加方式
var nameStrWidth = ctx.measureText(nameStr).width,
sloganPositionX = 245,
sloganX = nameStrWidth + sloganPositionX;
//设置旋转文字
//设置阴影
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowColor = '#000';
ctx.shadowBlur = 2;
ctx.rotate(- Math.PI / 30);
ctx.fillText(sloganStr,sloganX,67);
ctx.restore();
//设置曲线
ctx.save();
//设置阴影
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowColor = '#000';
ctx.shadowBlur = 2;
//获取口号长度 设置长度方式
var sloganStrWidth = ctx.measureText(sloganStr).width,
linePositionX = 350;
lineToX = sloganStrWidth + linePositionX;
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.moveTo(sloganX,58);
ctx.quadraticCurveTo(sloganX,47,lineToX + sloganX - 320,45);
ctx.stroke();
ctx.restore();
}else{
alert('内容不能为空格');
}
};
btn.click();
//创建动画canvas
var aCanvas = document.getElementById("animationCanvas");
var aCtx = aCanvas.getContext('2d');
var snow = [];
setInterval(function () {
// 清除动画画布
aCtx.clearRect(0,0,500,76);
// 重新在动画画布上绘制名片
aCtx.drawImage(canvas,0,0,500,76);
// 创建雪花
for(var i = 0; i <= 10; i ++) {
if(!snow[i]) {
snow[i] = {};// 把雪花的各项数据存放在一个对象内
snow[i].radius = Math.floor(Math.random() * 5) + 1; // 半径
snow[i].y = - snow[i].radius - Math.floor(Math.random() * 10); // y坐标
snow[i].x = i * 50 + Math.floor(Math.random() * 10) - 5; // x坐标
snow[i].vy = Math.floor(Math.random() * 2) + 1; // 下落速度
}
aCtx.beginPath();
aCtx.arc(snow[i].x, snow[i].y, snow[i].radius, 0, Math.PI * 2);
aCtx.fillStyle = "rgba(255, 255, 255, 0.5)";
aCtx.fill();
snow[i].y = snow[i].y + snow[i].vy;
if(snow[i].y > aCtx.canvas.height + snow[i].radius * 2) {
snow[i] = undefined;
}
}
},70);
</script>
</body>
</html>长度计算的部分写的有点low，雪花的绘制也是看了老师的源码案例才想到，不完全是自己写出来的能达到学习效果吗？
写回答
1回答
-
同学你好，代码实现的正确，很棒 ！同学才刚入门，没有实际的经验，所以能够仿照别人的实现，就是一个很不错的开头。学习就是一个循序渐进的过程，当我们刚入门的时候，就是要先学会照着别人的代码去写，到基础慢慢提升了，要学习别人的思路，仿照思路去实现。等到技术达到一定的高度，就能有自己的思路独立去写了。
另外，Canvas还是有难度的，不过在实际开发中不用，简单的练习一下就好。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题