用生成名片按钮后，曲线的长度总是达不到口号的长度效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="createcard">
<div class="left-item">
<input type="text" id="name" name="" placeholder=" 姓名">
<input type="text" id="address" name="" placeholder=" 地址">
<input type="text" id="job" name="" placeholder=" 职业">
<input type="text" id="say" name="" placeholder=" 口号">
<button id="create">生成名片</button>
</div>
<div class="right-item">
<canvas id="canvas1" class="canvas1" height="120px" width="1000px"></canvas>
<canvas id="canvas2" class="canvas2" height="120px" width="1000px"></canvas>
</div>
</div>
<script type="text/javascript">
//card上的文字和北京图片进行绘画
var canvas1=document.getElementById("canvas1");
var context1=canvas1.getContext('2d');
var btn=document.getElementById('create');
//将按钮进行点击定义
btn.onclick = function() {
context1.clearRect(0, 0, context1.canvas.width, context1.canvas.height)
//对名片内容进行编写
var name = document.getElementById("name").value || "请输入姓名";
var address=document.getElementById("address").value||"请输入地址";
var job=document.getElementById("job").value||"请输入职业";
var say=document.getElementById("say").value||"请输入口号";
var maxlength;
var namelength=context1.measureText("name").width;
var addresslength=context1.measureText("address").width;
var joblength=context1.measureText("job").width;
var saylength=context1.measureText("say").width;
//口号下面的曲线值
if (namelength>addresslength) {
maxlength=namelength;
if (namelength<joblength) {maxlength=joblength;}
} else {
maxlength=addresslength;
if (addresslength<joblength) {maxlength=joblength;}
}
context1.font="32px sans-serif";
context1.fillStyle="white";
context1.fillText(name,130,38);
context1.font="22px sans-serif";
context1.beginPath();
context1.fillText(address,130,70);
context1.beginPath();
context1.fillText(job,130,102);
//对口号的x和y进行设定
var saylength=context1.measureText("say").width;
var sayx=(canvas1.width-maxlength-130-saylength)/2+130+maxlength;
context1.save();
context1.translate(sayx,65);
context1.rotate(-Math.PI/36);
context1.beginPath();
context1.shadowOffsetX=5;
context1.shadowOffsetY=5;
context1.shadowblur=5;
context1.shadowColor="#373537";
context1.fillText(say,0,0);
context1.restore();
//口号下面的贝塞尔曲线取值
context1.lineWidth = 4;
context1.strokeStyle = "#848384";
context1.beginPath();
context1.moveTo(sayx+5, 94);
context1.quadraticCurveTo(sayx, 75, sayx+saylength+90, 72);
context1.stroke();
};
btn.onclick();
//对card上的渐变背景色，雪花落下的效果进行离屏处理
var canvas2=document.getElementById("canvas2");
var context2=canvas2.getContext('2d');
var img=new Image ();
img.src="http://img1.sycdn.imooc.com/climg//59859f4d00014f1503000100.jpg";
img.onload=function(){
context1.drawImage(img,30,15,86,86,10,10,120,120);
context2.drawImage(canvas1,0,0,canvas1.width,canvas1.height,0,0,canvas2.width,canvas2.height)
};
</script>
</body>
</html>
在内部也将口号的长度变量取到了，但是在实际生成效果上就感觉取到了一部分，曲线跟着口号长度改变而改变的长度十分有限
然后调整了曲线最后一个点的y值，也不是由于角度口号文字遮挡曲线的原因
正在回答
同学你好， 如下图所示， 这个值表示结束点x的坐标， 可以适当调整这个的值， 改变曲线的长度
另， 老师这边测试你的代码， 如下图所示。 效果实现的可以
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星