老师，为什么str的值不会改变，是我获取input值的方法错误了吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        #container{
            width:1200px;
            margin:0 auto;
            position:relative;
        }
        canvas{
            display:block;
            background:pink;
            margin:50px auto;
        }
        form{
            width:300px;
            position:absolute;
            top:20px;
            left:50px;
            text-align:center;
        }
        input{
            width:100%;
            height:20px;
            border-radius:15px;
            margin-top:20px;
            text-indent:10px;
            border:none;
            padding:5px;
            outline:none;
        }
        input[type="submit"]{
            width:40%;
            height:30px;
            background:black;
            color:white;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="canvas" width="1200" height="350"></canvas>
        <form>
            <input type="text" name="name" placeholder="姓名" value="123">
            <input type="text" name="address" placeholder="地址">
            <input type="text" name="job" placeholder="职业">
            <input type="text" name="slogan" placeholder="口号">
            <input type="submit" name="submit" value="生成口号" id="submit">
        </form>
    </div>
    
    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        // 保存当前环境
        ctx.save();
        // 左边的矩形
        ctx.fillStyle="#A3A398";
        ctx.strokeRect(0,0,400,350);
        ctx.fillRect(0,0,400,350);
        // 右边的矩形
        ctx.restore();
        ctx.strokeStyle="#A3A398";
        ctx.fillStyle="#EEEAD5";
        ctx.strokeRect(400,0,800,350);
        ctx.fillRect(400,0,800,350);
        ctx.restore();
        // 设置渐变
        var linearGradient=ctx.createLinearGradient(500,0,1100,0);
        linearGradient.addColorStop(0,"#000");
        linearGradient.addColorStop(0.5,"#000");
        linearGradient.addColorStop(1,"rgba(0,0,0,0.1)");
        ctx.fillStyle=linearGradient;
        ctx.strokeStyle="#EEEAD5";
        // 渐变矩形
        ctx.strokeRect(500,100,600,100);
        ctx.fillRect(500,100,600,100);
        // 绘制图形
        // 设置字体旋转图形会受影响？
        var img=new Image();
        img.src="logo.png";
        img.onload=function(){
            ctx.drawImage(img,-385,-110,80,80)
        }
        
        // 插入文字
        var str1="请输入名字";
        var str2="请输入地址";
        var str3="请输入职业";
        var str4="请输入口号";
        // 顺序大小 加粗 字体
        ctx.font ="30px bold"; 
        ctx.fillStyle= "#fff"; 
        ctx.fillText(str1,600,130);
        ctx.restore();
        ctx.font ="20px bold"; 
        ctx.fillStyle= "#fff"; 
        ctx.fillText(str2,600,160);
        ctx.fillText(str3,600,190);
        // 先平移坐标原点再旋转
        ctx.translate(900,160);
        ctx.rotate(-Math.PI/18);
        ctx.fillText(str4,0,0);
        // 点击提交按钮改变文本
        var submit=document.getElementById("submit");
        var input1=document.getElementsByTagName("input")[0];
        var input2=document.getElementsByTagName("input")[1];
        var input3=document.getElementsByTagName("input")[2];
        var input4=document.getElementsByTagName("input")[3];
        var width1=ctx.measureText(str1).width;
        var width2=ctx.measureText(str2).width;
        var width3=ctx.measureText(str3).width;
        // 根据输入的值的长度来改变str4的位置
        if(width1>200||width2>200||width3>200){
            ctx.fillText(str4,Math.max(width1,width2,width3)-200,0);
        }
        submit.onclick=function(){
            str1=input1.value;
            str2=input2.value;
            str3=input3.value;
            str4=input4.value;
            console.log(str1);
        }
        
    </script>
</body>
</html>

慕盖茨1437616 2018-10-16

源自：HTML5 Canvas绘图基础 6-7 完成案例文字图片显示和变换