贝塞尔曲线

来源：7-8 完成案例阴影和曲线

光aaaaand影

2019-08-18 14:42:35

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
        <!-- 左边 -->
        <div class="left-div">
            <div class="line">
                <input id="name" type="text" placeholder="姓名"/>
            </div>
            <div class="line">
                <input id="address" type="text" placeholder="地址"/>
            </div>
            <div class="line">
                <input id="job" type="text" placeholder="职业"/>
            </div>
            <div class="line">
                <input id="slogan" type="text" placeholder="口号"/>
            </div>
            <div class="line">
                <button id="createBtn">生成名片</button>
            </div>
        </div><!--left-div  -->
        <!-- 右边 -->
        <div class="right-div">
            <canvas id="animCanvas" width="600" height="100">
                您的浏览器不支持Canvas，请升级浏览器
            </canvas>
        </div>
        <script type="text/javascript" src="js/script.js"></script>
    </body>
</html>

*{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}

.left-div{
    float:left;
    width:30%;
    height:100%;
    background:#a4a296;
}
.left-div>.line{
    width:100%;
    text-align: center;
    margin-top:30px;
}
.left-div>.line:first-child{
    margin-top:200px;
}
.left-div>.line>input{
    width:300px;
    height:30px;
    padding-left:15px;
    border:none;
    border-radius:15px;
}
.left-div>.line>button{
    width:100px;
    height:30px;
    background:#222;
    border:none;
    border-radius:15px;
    color:#ddd;
    cursor:pointer;
}

.right-div{
    float:left;
    width:70%;
    height:100%;
    background:#eee9d3;
    position:relative;
}
.right-div>canvas{
    position:absolute;
    top:200px;
    left:50%;
    margin-left:-300px;
}

var canvas=document.getElementById("animCanvas");
var ctx=canvas.getContext("2d");

// 点击按钮，提交信息
var btn=document.getElementById("createBtn");
btn.onclick=function(){
    //渐变
    var lg=ctx.createLinearGradient(0,0,600,100);
    lg.addColorStop(0.5,"#000");
    lg.addColorStop(1,"rgb(133,133,133)");
    ctx.fillStyle=lg;
    ctx.fillRect(0,0,600,100);
    // 引入logo
    var img=new Image();
    img.src="img/logo.png";
    img.onload=function(){
        ctx.drawImage(img,10,10);
    }
    // 获取信息
    var name=document.getElementById("name").value||"请输入姓名";
        address=document.getElementById("address").value||"请输入地址";
        job=document.getElementById("job").value||"请输入职业";
        slogan=document.getElementById("slogan").value||"请输入口号";
    var maxWidth=0;
        nameWidth=ctx.measureText(name).width;
        addressWidth = ctx.measureText(address).width;
        jobWidth = ctx.measureText(job).width;
        sloganWidth = ctx.measureText(slogan).width;
    //绘制文字
    ctx.save();//onload事件是在图片加载完之后执行的，可能在旋转之后
    ctx.font= "bold 30px sans-serif";
    ctx.fillStyle="#FFF";
    ctx.fillText(name,105,35);
    ctx.font= "bold 20px sans-serif";
    ctx.fillText(address,105,60);
    ctx.fillText(job,105,85);
    
    // 口号阴影
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 1.5;
    // maxWidth为name,address,job三者中最长的宽度
    if(maxWidth<nameWidth){
        maxWidth=nameWidth;
    }
     if(maxWidth < addressWidth) {
      maxWidth = addressWidth;
    }
    if(maxWidth < jobWidth) {
      maxWidth = jobWidth;
    }
    // 口号旋转与平移
    var offset=(600-105-maxWidth-sloganWidth)/2;
    ctx.translate(105+maxWidth+offset,60)
    // ctx.rotate(-Math.PI/24);
    ctx.fillStyle="rgba(255,255,255,0.7)";
    ctx.fillText(slogan,0,0);
    ctx.restore();
    
    // 绘制曲线
    console.log(sloganWidth);
    ctx.beginPath();
    ctx.moveTo(105 + maxWidth + offset, 70);
    ctx.bezierCurveTo(105 + maxWidth + offset, 50, 105 + maxWidth + offset+ sloganWidth, 80, 105 + maxWidth + offset+ sloganWidth, 70);
    ctx.strokeStyle="#fff";
    ctx.stroke();
    
}
//第一次绘制
btn.click();

请问老师，为什么我的曲线总是画的短呢

写回答

1回答