老师看看这个
点击事件怎么没有效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
input {
outline: none;
border: none;
}
.box {
position: absolute;
left: 30px;
top: 50px;
width: 300px;
height: 250px;
background-color: gray;
}
input {
display: inline-block;
border-radius: 8px;
width: 200px;
height: 25px;
line-height: 25px;
margin: 10px 50px 10px 50px;
text-indent: 15px;
}
.btn {
width: 86px;
margin: 20px 107px 50px 107px;
text-align: center;
text-indent: 0;
background-color: black;
color: white
}
canvas {
position: absolute;
left: 330px;
top: 50px;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box" id="box">
<input type="text" placeholder="姓名" id="username">
<input type="text" placeholder="地址" id=addr>
<input type="text" placeholder="职业" id=job>
<input type="text" placeholder="口号" id="slogn">
<input type="button" value="生成名片" class="btn" id="btn">
</div>
<canvas id="canvas" width="600" height="250"></canvas>
<script>
var ctx = canvas.getContext("2d");
var linear = ctx.createLinearGradient(250, 40, 400, 40,);
linear.addColorStop(0, "black");
linear.addColorStop(1, "gray");
ctx.fillStyle = linear;
ctx.translate(80, 80);
ctx.fillRect(0, 0, 400, 80);
var img = new Image();
img.src = "logo.png";
img.onload = function () {
ctx.drawImage(img, 0, 0, 40, 40, 10, 5, 70, 70);
}
var namevalue = "", addvalue = "", jobvalue = "", slognvalue = "";
ctx.fillStyle = 'white';
namevalue = '请输入姓名';
ctx.font = "23px sans-serif ";
ctx.fillText(namevalue, 80, 25);
ctx.fillStyle = 'white';
addvalue = '请输入地址';
ctx.font = "15px sans-serif ";
ctx.fillText(addvalue, 80, 50);
ctx.fillStyle = 'white';
jobvalue = '请输入职业';
ctx.font = "15px sans-serif ";
ctx.fillText(jobvalue, 80, 70);
ctx.save();
ctx.fillStyle = 'white';
slognvalue = '请输入口号';
ctx.font = "15px sans-serif ";
ctx.rotate(-Math.PI / 60);
ctx.fillText(slognvalue, 250, 55);
ctx.restore();
btn.onclick = function () {
console.log(1);
namevalue = username.value;
addvalue = addr.value;
jobvalue = job.value;
slognvalue = slogn.value;
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，解答如下：
1、初始时卡片上是有内容的
在输入框中填入内容，点击“生成名片”按钮，会把点击事件里面的代码执行一遍，也就是把画布中所有的内容都绘制一遍，因为内容的位置是一样的，所以就会发生覆盖。
2、Math.PI代表的是180度，ctx.rotate(-Math.PI / 60);这样写相当于逆时针旋转了3度，
ctx.rotate(-Math.PI / 3)这样写相当于逆时针旋转了60度。在绘制口号时，开始绘制文本的 x 坐标位置是250，y坐标是55，导致溢出了画布，就不会显示了
如果同学想看到画布坐标系旋转60度是什么样子的，可以修改下x和y的坐标，例如：
口号绘制在起点的效果：
祝学习愉快~
同学你好，关于同学的疑问，解答如下：
1、点击事件是生效的，页面没有变化，是因为书写的有问题，可以参考下方修改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
input {
outline: none;
border: none;
}
.box {
position: absolute;
left: 30px;
top: 50px;
width: 300px;
height: 250px;
background-color: gray;
}
input {
display: inline-block;
border-radius: 8px;
width: 200px;
height: 25px;
line-height: 25px;
margin: 10px 50px 10px 50px;
text-indent: 15px;
}
.btn {
width: 86px;
margin: 20px 107px 50px 107px;
text-align: center;
text-indent: 0;
background-color: black;
color: white
}
canvas {
position: absolute;
left: 330px;
top: 50px;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box" id="box">
<input type="text" placeholder="姓名" id="username">
<input type="text" placeholder="地址" id="addr">
<input type="text" placeholder="职业" id="job">
<input type="text" placeholder="口号" id="slogn">
<input type="button" value="生成名片" class="btn" id="btn">
</div>
<canvas id="canvas" width="600" height="250"></canvas>
<script>
var ctx = canvas.getContext("2d");
var linear = ctx.createLinearGradient(250, 40, 400, 40, );
linear.addColorStop(0, "black");
linear.addColorStop(1, "gray");
ctx.fillStyle = linear;
ctx.translate(80, 80);
ctx.fillRect(0, 0, 400, 80);
var img = new Image();
img.src = "logo.png";
img.onload = function () {
ctx.drawImage(img, 0, 0, 40, 40, 10, 5, 70, 70);
}
btn.onclick = function () {
ctx.clearRect(0, 0, 400, 80);
// 背景的线性渐变
var linearGradient = ctx.createLinearGradient(0, 0, 400, 80);
linearGradient.addColorStop(0, "black");
linearGradient.addColorStop(1, "gray");
ctx.fillStyle = linearGradient;
ctx.fillRect(0, 0, 400, 80);
ctx.drawImage(img, 0, 0, 40, 40, 10, 5, 70, 70);
var namevalue = "",
addvalue = "",
jobvalue = "",
slognvalue = "";
ctx.fillStyle = 'white';
namevalue = document.getElementById("username").value || '请输入姓名';
ctx.font = "23px sans-serif ";
ctx.fillText(namevalue, 80, 25);
ctx.fillStyle = 'white';
addvalue = document.getElementById("addr").value || '请输入地址';
ctx.font = "15px sans-serif ";
ctx.fillText(addvalue, 80, 50);
ctx.fillStyle = 'white';
jobvalue = document.getElementById("job").value || '请输入职业';
ctx.font = "15px sans-serif ";
ctx.fillText(jobvalue, 80, 70);
ctx.save();
ctx.fillStyle = 'white';
slognvalue = document.getElementById("slogn").value || '请输入口号';
ctx.font = "15px sans-serif ";
ctx.rotate(-Math.PI / 60);
ctx.fillText(slognvalue, 250, 55);
ctx.restore();
console.log(namevalue)
// console.log(1);
// namevalue = username.value;
// addvalue = addr.value;
// jobvalue = job.value;
// slognvalue = slogn.value;
}
btn.onclick()
</script>
</body>
</html>2、如果写成ctx.rotate(-Math.PI /3)，那么就显示到页面的外面了，会看不到。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星