Canvas生成证书

html部分

<div>
    <div class='item'>
        <form action="" name="name_form" method="get">
            <div>
                <div>姓名</div>
                <div>
                    <input type="text" id="your_name" placeholder="输入你的名字" value="张三">
                </div>
            </div>
            <div>
                <div>高中</div>
                <div>
                    <input type="text" id="your_school" placeholder="输入你的学校名字" value="复旦附中">
                </div>
            </div>
            <div>
                <div>性别</div>
                <div>
                    <input type="radio" name="your_sex" id="your_sex_male" value="男" checked="true">男
                    <input type="radio" name="your_sex" id="your_sex_female" value="女">女
                </div>
            </div>
            <div>
                <button type="button" onclick="javascript:gen_zkz_func();">生成准考证图片</button>
            </div>
        </form>
    </div>
    <div class='item'>
        <img id="base" style="display:none;" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1097725720,3001499736&fm=26&gp=0.jpg" data-bd-imgshare-binded="1">
        <canvas id="temp" style="display:none;"></canvas>
    </div>
</div>

js部分

function drawCanvas(imgObj) {
    var c = document.getElementById('temp');
    c.width = 800;
    c.height = 1071;
    var ctx = c.getContext("2d");
    ctx.font = "bold 28px 'SimSun'";
    ctx.fillStyle = "#151515";

    ctx.drawImage(imgObj, 0, 0); // 背景图

    ctx.fillText($('#your_name').val(), 410, 416); // 姓名
    ctx.fillText($('input:radio[name=your_sex]:checked').val(), 640, 416); //性别
    ctx.fillText($('#your_school').val(), 410, 485); //位置
    $('#temp').show();
}

function gen_zkz_func() {
    var img = document.getElementById("base");
    drawCanvas(img);
}

css部分

.item {
    float: left;
    width: 50%;
}
#temp {
    width: 100%;
}

戳我看效果: 原文链接.