老师，研究不出，口号位置为什么不会动，谢谢

来源：9-3 完成案例动画部分

qq_慕移动3101913

2020-03-04 20:23:25

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字图片显示和变换案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            height: 500px;
        }

        .obx {
            float: left;
            width: 390px;
            height: 356px;
            padding: 20px 30px 0px 30px;
            background-color: rgb(165, 162, 152);
            margin-top: 60px;
            margin-left: 50px;
        }

        input[type='text'],
        input[type='url'] {
            margin-top: 25px;
            width: 386px;
            height: 30px;
            border-radius: 20px;
            background-color: #fff;
            /* background:none;   */
            outline: none;
            border: 1px solid #fff;
            text-indent: 15px;
        }

        #btn {
            width: 100px;
            height: 30px;
            color: #fff;
            background-color: black;
            border: none;
            text-align: center;
            text-indent: 0;
            border-radius: 20px;
            outline: none;
            cursor: pointer;
            margin: 50px 130px;
        }

        .right-div {
            width: 800px;
            height: 376px;
            float: left;
            background: #eee9d3;
            margin-top: 60px;
        }

        .right-div canvas {
            margin: 140px 0 0 120px;
        }

        #canvas {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="obx">
            <input type="text" id="username" placeholder="姓名">
            <input type="url" name="" id="url" placeholder="地址">
            <input type="text" name="" id="job" placeholder="职业">
            <input type="text" name="" id="slogan" placeholder="口号">
            <input type="button" value="生成名片" id="btn">
        </div>
        <div class="right-div">
            <canvas id="canvas">
                您的浏览器不支持
            </canvas>
            <canvas id="animCanvas">
                您的浏览器不支持Canvas，请升级浏览器
            </canvas>
        </div>

    </div>

    <script>
        // 创建和设置cardCanvas，该canvas作为离屏canvas
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.canvas.width = 600;
        ctx.canvas.height = 100;
        //加载图片
        var img = new Image();
            img.src = "./logo.png";
            img.onload = function () {
                ctx.drawImage(img, 10, 10);
            }
        
        //获取按钮
        var btn = document.getElementById('btn');

        //绑定点击事件  点击生成名片，左边文字对应变化
        btn.onclick = function () {
             //清除ctx矩形宽高，后面会根据文字设置宽高，从而改变口号位置
             ctx.clearRect(0, 50, ctx.canvas.width, ctx.canvas.height);

            //线性渐变
            var linearGradient = ctx.createLinearGradient(500, 376, 0, 0);

            //给渐变添加颜色
            linearGradient.addColorStop(0, '#DCDCDC');
            linearGradient.addColorStop(.6, '#000');

            //设置渐变作为样式
            ctx.fillStyle = linearGradient;
            ctx.fillRect(0, 0, 600, 100)

            // logo图像 把图片绘制在(x,y)处
            ctx.drawImage(img, 10, 10); //因为点击后图片会被清除掉，所以需要再绘画一次

            // 获取姓名、地址、职业，口号，绘制，并计算长度
            var username = document.getElementById('username'); 
            var url = document.getElementById('url');   
            var job = document.getElementById('job');  
            var slogan = document.getElementById('slogan'); 

            //创建文字
            var strName = username.value || '请输入名字',
                strUrl = url.value || '请输入地址',
                strJob = job.value || '请输入职业';
            //字体样式
            ctx.font = 'bold 23px sans-serif';  //设置文本样式，加粗 大小 字体
            ctx.fillStyle = "#fff";  //字体颜色
            ctx.fillText(strName, 100, 30)   //填充字体；只有填充或描边，字体才会显示在画布上
            //地址
            ctx.font = 'bold 18px sans-serif';
            ctx.fillText(strUrl, 100, 60)
            //职业 
            ctx.fillText(strJob, 100, 90)

            //设置变量，设置段落的最大宽度：
            var nameWidth, urlWidth, jobWidth, maxWidth = 0;
            console.log(maxWidth);
            //获取姓名、地址、职业的长度
            nameWidth = ctx.measureText(username).width;
            urlWidth = ctx.measureText(url).width;
            jobWidth = ctx.measureText(job).width;

            //通过判断设置段落的宽度
            if(maxWidth < nameWidth) {  //段落的最大宽度 < 姓名的宽度
                maxWidth = nameWidth;   //段落的最大宽度 = 姓名的宽度
            }
            if(maxWidth < urlWidth) {   
                maxWidth = urlWidth;
            }
            if(maxWidth < jobWidth) {   
                maxWidth = jobWidth;
            }

            // 绘制口号
            var slogan = slogan.value || "请输入口号";
            ctx.save();
            // 做图形变换
            ctx.rotate(-0.1);   //旋转
            ctx.translate(0, 50);   //平移
            // 阴影
            ctx.shadowOffsetX = 10;
            ctx.shadowOffsetY = 10;
            ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
            ctx.shadowBlur = 1.5;
            ctx.fillStyle = "#ddd";

            // 计算口号位置
            var solganWidth;
            solganWidth = ctx.measureText(slogan).width;
            // console.log(slogan);
            
            //设置口号的职位 canvas的宽度- 10-0-口号宽度 30
            var offset = (ctx.canvas.width - 115 - maxWidth - solganWidth) / 2;
            console.log(offset);

            ctx.fillText(slogan, 90 + maxWidth + offset, 35);
            // // 画曲线
            ctx.beginPath();
            ctx.moveTo(100 + maxWidth + offset, 55);
            ctx.quadraticCurveTo(65 + maxWidth + offset, 40, 110 + solganWidth + maxWidth + offset, 50);
            ctx.strokeStyle = "#ddd";
            ctx.stroke();
            ctx.restore();
        }
        // 加载页面即可触发click事件 不然需要点击才出现名片
        btn.click();

        // 创建和设置animCanvas，该canvas才是真正的显示
        var animCanvas = document.getElementById('animCanvas');
        var animCtx = animCanvas.getContext('2d');
            //设置画布的宽高
            animCtx.canvas.width = 600;
            animCtx.canvas.height = 100;

        var circles = [];
        setInterval(function () {
            // 擦出画布
            animCtx.clearRect(0, 0, animCtx.canvas.width, animCtx.canvas.height);
            // 把离屏canvas的内容画进来
            animCtx.drawImage(canvas, 0, 0, animCtx.canvas.width, animCtx.canvas.height,
                0, 0, ctx.canvas.width, ctx.canvas.height);
        },100)

    </script>
</body>

</html>

写回答

2回答