canvas入门实战--邀请卡生成与下载

守候i · 掘金 · 前端 · 2017-12-14 02:04

正文

1.前言

写了很多的javascript和css3的文章，是时候写一篇canvas的了。canvas是html5提供的一个新的功能！至于作用，就是一个画布。然后画笔就是javascript。canvas的用途非常的广，特别是html5游戏以及数据可视化这两个方面。现在canvas给我的感觉就和css3一样，可以不用太厉害，但是必须要会基础的用法。但是以后对canvas的需求，肯定会越来越大。所以canvas很值得学习，而且学好canvas，就是很好的一个加分项。对于这篇文章，我也是以canvas初学者的角度写的，会有很多改善的地方。如果大家觉得我有什么可以改善的，或者建议，欢迎指点迷津！代码已上传github，需要的欢迎star( downloadImg )。

大家看这篇文章之前，要了解javascript的一些基础，也要看着了解一些canvas的api（ canvas-MSN教程， canvas菜鸟教程）

2.邀请卡实例

邀请卡自动生成这个会有的，毕竟有时候，很多邀请卡都是一样的，就是被邀请的人不一样而已，也就是说，整个邀请卡，就是一个名字不一样，那么下面。就写一套代码，根据名字生成邀请卡！

2-1.运行效果

html代码

<html>
<head>
    <meta charset="utf-8">
    <title>下载图片</title>
    <style>
        .set-option {
            float: left;
            width: 400px;
        }

        .set-option .text {
            width: 200px;
            height: 40px;
            padding-left: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        .set-option td {
            padding: 10px 0;
        }

        .set-option td:first-child {
            text-align: right;
            padding-right: 10px;
        }

        .set-option p {
            margin: 0;
            line-height: 16px;
        }

        .check-box {
            width: 16px;
            height: 16px;
            margin: 0;
            vertical-align: top;
        }

        button {
            width: 200px;
            height: 50px;
            border: none;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            display: block;
            margin: 10px auto;
        }

        button:hover {
            opacity: .9;
        }

        .btn-all {
            background: #f90;
        }

        .btn-save {
            background: #09f;
        }

        .btn-download {
            background: #4CAF50;
        }
    </style>
</head>
<body>
<div>
    <div class="set-option">
        <table>
            <tr>
                <td>画布尺寸</td>
                <td><input type="text" class="text" id="size"/></td>
            </tr>
            <tr>
                <td>背景图片</td>
                <td><input type="file" id="file"/></td>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" class="text" id="user-name"/>
                </td>
            </tr>
            <tr>
                <td>用户名x坐标</td>
                <td>
                    <input type="number" class="text" id="text-option-x"/></br>
                    <p><input type="checkbox" class="check-box" value="1" id="is-center-x">居中显示</p>
                </td>
            </tr>
            <tr>
                <td>用户名y坐标</td>
                <td>
                    <input type="number" class="text" id="text-option-y"/></br>
                    <p><input type="checkbox" class="check-box" value="1" id="is-center-y">居中显示</p>
                </td>
            </tr>
            <tr>
                <td>用户名字体大小</td>
                <td><input type="number" class="text" id="text-size"/></td>
            </tr>
            <tr>
                <td>文字颜色</td>
                <td><input type="text" class="text" id="text-color"/></td>
            </tr>
            <tr>
                <td>图片类型</td>
                <td>
                    <select type="text" class="text" id="img-type">
                        <option value="jpg">jpg</option>
                        <option value="png">png</option>
                    </select>
                </td>
            </tr>
        </table>
        <button id="save-image" class="btn-save">效果预览</button>
        <button id="download-img" class="btn-download">下载当前图片</button>
        <button id="download-all" class="btn-all">批量导出</button>
    </div>
    <div class="show-canvas">
        <canvas width=200 height=200 id="thecanvas"></canvas>
    </div>
</div>
</body>
</html>

效果如图，那么大家细想一下，关于一张邀请卡，有什么东西是需要改变的！看到上图相比不难发现！有如下需要改变的属性：图片的大小，图片，用户名，用户名的坐标（x,y,x轴是否居中，y轴是否居中），用户名字体的大小，用户名字体的颜色，以及下载图片的类型。

这样就得到了如下的参数（大家看到有些参数是有值的，可以想成默认值就行了）

var option = {
    img: '111.jpg',
    width: 500,
    height: 350,
    fontSize: "20px Microsoft YaHei",
    color: "black",
    text: '守候',
    imgType: 'jpg',
    x: 30,
    y: 30,
    xCenter: false,
    yCenter: false,
};

2-2.步骤

1.初步效果

根据上面的参数，先初步画一个效果，代码基本都是一个写法，没什么技巧

//画图
function draw(obj) {
    var canvas = document.getElementById("thecanvas");
    //画布大小
    canvas.width = obj.width;
    canvas.height = obj.height;
    //设置图片
    var img = new Image();
    img.src = obj.img;
    var ctx = canvas.getContext("2d");
    //设置字体的坐标
    var _x = obj.x, _y = obj.y;
    //是否居中显示
    if (obj.xCenter) {
        _x = obj.width / 2;
    }
    if (obj.yCenter) {
        _y = obj.height / 2;
    }
    //图片加载后
    img.onload = function () {
        //先画图片
        ctx.drawImage(img, 0, 0);
        //设置文字的大小
        ctx.font = obj.fontSize;
        //设置文字的颜色
        ctx.fillStyle = obj.color;
        //设置文字坐标
        if (obj.xCenter) {
            ctx.textAlign = "center";
        }
        //画文字
        ctx.fillText(obj.text, _x, _y);
    };
}

window.onload = function () {
    draw(option);
}

2.动态改变参数

看到图已经画好了，工作其实已经完成一半了！

下面就是动态改变参数！这一步其实很简单。
首先，改变画布的尺寸

//画布尺寸
//获取按钮
var size = document.getElementById("size");
size.addEventListener("blur", function () {
    //根据空格，区分高宽
    var _width = parseInt(size.value.replace(/(^\s*)|(\s*$)/g, "").split(/\s+/)[0]),
        _height = parseInt(size.value.replace(/(^\s*)|(\s*$)/g, "").split(/\s+/)[1]);
    //把参数的width和height改掉
    option.width = _width || 100;
    option.height = _height || 100;
    //重新画图
    draw(option);
});

上面代码设置了，只要输入框失去了焦点，就会改变画布的大小，下面来运行下，看下效果（gif图差强人意，大家看懂就好）

canvas没有层级的说法，只要改canvas，都要重绘。哪怕就是一个字移动一个像素。

做好了这个，下面做选择图片的功能！