麻烦老师看下是否正确，谢谢老师

来源：7-8 完成案例阴影和曲线
秋荏苒
2019-09-17 23:17:45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            color: #acacac;
        }
        input:-moz-placeholder, textarea:-moz-placeholder {
            color: #acacac;
        }
        input::-moz-placeholder, textarea::-moz-placeholder {
            color: #acacac;
        }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            color: #acacac;
        }

        .wrap {
            margin: 100px auto;
            width: 1500px;
        }

        .form-wrap {
            width: 500px;
            height: 400px;
            background: rgb(172, 171, 163);
            float: left;
        }

        .input {
            display: block;
            width: 400px;
            height: 30px;
            margin-bottom: 40px;
            margin-left: 50px;
            border: none;
            outline: none;
            border-radius: 20px;
            text-indent: 20px;
        }

        .input:first-child {
            margin-top: 50px;
        }

        .btn {
            display: block;
            width: 100px;
            height: 30px;
            background: black;
            color: #bcbcbc;
            border: none;
            outline: none;
            border-radius: 20px;
            margin: 0 auto;
            cursor: pointer;
            box-shadow: 0 0 3px rgba(0, 0, 0, .7);
        }

        .btn:hover {
            color: white;
        }

        .btn:active {
            box-shadow: none;
        }

        .canvas-wrap {
            width: 1000px;
            height: 400px;
            background: rgb(240, 237, 220);
            float: left;
        }

        .canvas {
            display: block;
            /*background: black;*/
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="form-wrap">
        <input type="text" class="input" id="name" placeholder="姓名" autocomplete="off">
        <input type="text" class="input" id="addr" placeholder="地址" autocomplete="off">
        <input type="text" class="input" id="job" placeholder="职业" autocomplete="off">
        <input type="text" class="input" id="slogan" placeholder="口号" autocomplete="off">
        <button class="btn" id="btn">生成名片</button>
    </div>
    <div class="canvas-wrap">
        <canvas class="canvas" id="canvas" width="600" height="100"></canvas>
    </div>
</div>

<script>
    const canvas = document.querySelector("#canvas"),
        name = document.querySelector("#name"),
        addr = document.querySelector("#addr"),
        job = document.querySelector("#job"),
        slogan = document.querySelector("#slogan"),
        btn = document.querySelector("#btn"),
        ctx = canvas.getContext("2d");

    // 绘制画布
    function draw(name, addr, job, slogan) {
        const lineGradient = ctx.createLinearGradient(400, 0, 600, 100);
        lineGradient.addColorStop(0, 'black');
        lineGradient.addColorStop(1, 'rgba(181,181,181,0.3)');
        ctx.save();
        ctx.fillStyle = lineGradient;
        ctx.fillRect(0, 0, 600, 100);

        const img = new Image();
        img.src = 'https://pic.superbed.cn/item/5d80bbc8451253d178487448.png';
        img.onload = function () {
            ctx.restore();
            ctx.drawImage(img, 180, 100, 275, 211, 0, 0, 150, 100)
        };

        let nameStr = name || "请输入姓名",
            addrStr = addr || "请输入地址",
            jobStr =  job || "请输入职业",
            sloganStr = slogan || "请输入口号";

        const sloganDistance = 350;

        ctx.fillStyle = 'white';
        ctx.font = "30px sans-serif";
        ctx.fillText(nameStr, 160, 35);

        ctx.font = "20px sans-serif";
        ctx.fillText(addrStr, 160, 60);
        ctx.fillText(jobStr, 160, 85);

        let nameStrWidth = ctx.measureText(nameStr).width,
            sloganX = sloganDistance + nameStrWidth;

        ctx.shadowOffsetX = 10;
        ctx.shadowOffsetY = 10;
        ctx.shadowColor = 'rgba(0, 0, 0, .7)';
        ctx.shadowBlur = 0;
        ctx.textAlign = "center";
        ctx.rotate(-7 * Math.PI / 180);
        ctx.fillText(sloganStr, sloganX, 110);

        let sloganWidth = ctx.measureText(sloganStr).width,
            curStartX = sloganX - sloganWidth / 2,
            curEndX = sloganX + sloganWidth / 2;

        ctx.strokeStyle = "white";
        ctx.beginPath();
        ctx.moveTo(curStartX, 130);
        ctx.quadraticCurveTo(curStartX - 5, 115, curEndX, 125);
        ctx.stroke();
    }

    draw();

    // 点击事件
    btn.onclick = function () {
        ctx.clearRect(0, 0, 600, 100);

        let nameVal = name.value,
            addrVal = addr.value,
            jobVal = job.value,
            sloganVal = slogan.value;

        draw(nameVal, addrVal, jobVal, sloganVal);
    };
</script>
</body>
</html>
写回答
1回答