遇到问题，请老师给予解答
来源：9-3 完成案例动画部分
yz_monkey
2020-07-22 13:16:43
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/base.css" />
<title>Document</title>
</head>
<body>
<div class="content">
<div class="contentLeft">
<div class="contentWrap">
<input type="text" id="name" placeholder="姓名" />
<input type="text" id="address" placeholder="地址" />
<input type="text" id="job" placeholder="职业" />
<input type="text" id="slogan" placeholder="口号" />
<input type="button" id="btn" value="生成名片" />
</div>
</div>
<div class="contentRight">
<div class="drawWrap">
<canvas id="canvas">您的浏览器不支持Canvas，请升级浏览器</canvas>
<canvas id="canvas2">您的浏览器不支持Canvas，请升级浏览器</canvas>
</div>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
css部分
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.content {
min-width: 1200px;
height: 400px;
}
.content .contentLeft {
width: 400px;
height: 100%;
float: left;
background-color: #A4A296;
}
.content .contentLeft .contentWrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px;
}
.content .contentLeft .contentWrap input {
display: block;
width: 350px;
height: 30px;
text-indent: 10px;
outline: none;
border: none;
margin: 15px 0;
border-radius: 15px;
}
.content .contentLeft #btn {
width: 120px;
background-color: #222222;
color: #ccc;
text-indent: 0;
}
.content .contentLeft #btn:hover {
color: #fff;
cursor: pointer;
}
.content .contentRight {
float: left;
width: 800px;
height: 100%;
background-color: #EEE9D3;
}
.content .contentRight .drawWrap canvas:last-child {
display: none;
}
js部分
// 绘制画布
var canvas1 = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = 800;
ctx.canvas.height = 400;
// 离屏画布
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas.getContext("2d");
ctx2.canvas.width = 800;
ctx2.canvas.height = 400;
// 背景色线性渐变
// var linearGradient = ctx.createLinearGradient(0, 0, 650, 0);
// linearGradient.addColorStop(0.5, "#000");
// linearGradient.addColorStop(1, "#808080");
// ctx.fillStyle = linearGradient;
// ctx.fillRect(75, 135, 640, 120);
// 创建图片logo
var img = new Image();
img.src = "./img/logo.png";
img.onload = function () {
ctx.drawImage(img, 95, 155);
};
// // 绘出文字
// var str1 = "请输入姓名";
// var str2 = "请输入地址";
// var str3 = "请输入职业";
// var str4 = "请输入口号";
// ctx.font = "bold 30px 微软雅黑";
// ctx.fillStyle = '#fff';
// ctx.textAlign = 'left';
// ctx.fillText(str1, 195, 175);
// ctx.font = "bold 20px 微软雅黑";
// ctx.fillText(str2, 195, 205);
// ctx.fillText(str3, 195, 235);
// ctx.fillStyle = '#ccc';
// ctx.fillText(str4, 495, 205);
//口号下虚线
ctx.moveTo(495, 225);
// 点击按钮事件
var btn = document.getElementById("btn");
btn.onclick = function () {
// 初始化 清空画布
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 重绘背景色线性渐变
var linearGradient = ctx.createLinearGradient(0, 0, 650, 0);
linearGradient.addColorStop(0.5, "#000");
linearGradient.addColorStop(1, "#808080");
ctx.fillStyle = linearGradient;
ctx.fillRect(75, 135, 640, 120);
// 重绘图片
ctx.drawImage(img, 95, 155);
//获取元素 和创建canvas
var name = document.getElementById("name").value || "请输入姓名";
var add = document.getElementById("address").value || "请输入地址";
var slogan = document.getElementById("slogan").value || "请输入职业";
var job = document.getElementById("job").value || "请输入口号";
var nameWdith,
addWidth,
sloganWidth,
jobWidth,
maxWdith = 0;
ctx.font = "bold 30px 微软雅黑";
ctx.fillStyle = "#fff";
ctx.fillText(name, 195, 175);
nameWdith = ctx.measureText(name).width;
ctx.font = "bold 20px 微软雅黑";
ctx.fillText(add, 195, 205);
ctx.fillText(job, 195, 235);
addWdith = ctx.measureText(add).width;
jobWdith = ctx.measureText(job).width;
// 判断字体的宽度是否大于maxWidth 为真则等于maxWidth
if (maxWdith < nameWdith) {
maxWdith = nameWdith;
}
if (maxWdith < addWdith) {
maxWdith = addWdith;
}
if (maxWdith < jobWdith) {
maxWdith = jobWdith;
}
ctx.save();
// 倾斜角度
ctx.rotate(-0.1);
// 字体阴影
ctx.shadowOffsetX = 10; //阴影X轴坐标
ctx.shadowOffsetY = 10; //阴影Y轴坐标
ctx.shadowColor = "rgba(0,0,0,0.5)"; //阴影颜色
ctx.shadowBlur = 1.5; //阴影模糊距离
ctx.fillStyle = "#ddd"; //阴影颜色
sloganWdith = ctx.measureText(slogan).width;
var offset = (ctx.canvas.width - 115 - maxWdith - sloganWidth) / 2;
ctx.fillStyle = "#ddd";
ctx.fillText(slogan, 495, 255);
//画曲线
ctx.beginPath();
ctx.moveTo(115 + maxWdith + offset, 70);
ctx.quadraticCurveTo(
115 + maxWdith + offset,
50,
115 + sloganWidth + maxWdith + offset,
60
);
ctx.strokeStyle = "#ddd";
ctx.stroke();
ctx.restore();
// console.log("1");
};
//进入网页就自动点击 绘制图形
btn.click();
//离屏动画部分
var circles = [];
setInterval(function () {
// 初始化 清空画布
ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
// 把离屏canvas2加载入canvas1中
ctx2.drawImage(
canvas,
0,
0,
ctx2.canvas.width,
ctx2.canvas.height,
0,
0,
ctx.canvas.width,
ctx.canvas.height
);
// 绘制下落图形
for (var i = 0; i <= 10; i++) {
if (!circles[i]) {
circles[i] = {}; //随机图形集合
circles[i].radius = Math.floor(Math.random() * 5) + 2; //随机图形半径
circles[i].y = -circles[i].radius - Math.floor(Math.random() * 10); //随机图形Y轴坐标
circles[i].x = i * 60 + Math.floor(Math.random() * 10) - 5; //随机图形X轴 坐标
circles[i].vy = Math.floor(Math.random() * 5) + 1; //随机目标动画移动速度
}
ctx2.beginPath();
ctx2.arc(circles[i].x, circles[i].y, circles[i].radius, 0, Math.PI * 2);
ctx2.fillStyle = "rgba(255,255,255,0.5)";
ctx2.fill();
circles[i].y = circles[i].y + circles[i].vy;
if (circles[i].y > ctx2.canvas.height + circles[i].radius * 2) {
circles[i] = undefined;
}
}
}, 100);
问题1、关于离屏动画 canvas2始终遮挡canvas1 这个问题我尝试修改但是未解决
问题2、关于曲线的问题 也没用解决 请老师给予解决方案
2回答
-
好帮手慕慕子
2020-07-23
同学你好，在控制台不报错的情况下，老师给同学提供一个中排查问题的方法， 可以在代码中添加console.log语句，输出测试下，查看是否是预期中的值，然后一点点修改。
祝学习愉快~
0 -
好帮手慕慕子
2020-07-22
同学你好，对于的你的问题解答如下：
获取的画布不对，所以无法显示，建议修改：
sloganWdith拼写有误，建议修改为一致的
添加位移距离
通过计算设置线的位置
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h020-07-22
相似问题