<canvas width="300" height="300" id="canvasOne" class="canvasOne"></canvas>

<script>

    var cancasOne = document.getElementById('canvasOne');

    var ctx = cancasOne.getContext('2d');

    ctx.font = 'bold 20px 微软雅黑';

    ctx.fillText('张三丰', 10, 30);

    //创建渐变文字

    ctx.font = "30px Verdana";

    var grandient = ctx.createLinearGradient(0, 0, canvasOne.width, 0);

    grandient.addColorStop('0', "magenta");

    grandient.addColorStop('0.5', 'blue');

    grandient.addColorStop('1.0', 'red');

    //用渐变填色

    ctx.fillStyle = grandient;

    ctx.fillText('tinama3798.cn', 10, 100);

</script>

<canvas width="301" height="301" id="canvasOne" class="canvasOne"></canvas>

<script>

    var cancasOne = document.getElementById('canvasOne');

    var ctx = cancasOne.getContext('2d');

    //画参考线

    function drawLine() {

        ctx.save();

        ctx.strokeStyle = 'blue';

        //横线

        ctx.beginPath();

        ctx.moveTo(0, canvasOne.width / 2);

        ctx.lineTo(canvasOne.height, canvasOne.width / 2);

        ctx.stroke();

        //竖线

        ctx.beginPath();

        ctx.moveTo(canvasOne.width / 2, 0);

        ctx.lineTo(canvasOne.width / 2, canvasOne.height);

        ctx.stroke();

        ctx.restore();

    }

    drawLine();

    ctx.font = 'bold 50px 楷体';

    ctx.textAlign = 'center';

    ctx.textBaseline = 'middle';

    ctx.fillText('张三丰', canvasOne.width / 2,

        canvasOne.height / 2);

</script>

<input id="inputOne"  />

<canvas width="200" height="200" id="canvasOne" class="canvasOne"></canvas>

<script>

    var cancasOne = document.getElementById('canvasOne');

    var ctx = cancasOne.getContext('2d');

    //画参考线

    function drawLine() {

        ctx.save();

        var point1 = [5, 5],

            point2 = [5, 195],

            point3 = [195, 5],

            point4 = [195, 195];

        //2.画对角线

        ctx.lineWidth = 0.5;

        ctx.strokeStyle = '#b4210f';

        ctx.beginPath();

        moveTo(point1);

        lintTo(point4);

        ctx.stroke();

        moveTo(point2);

        lineTo(point3);

        ctx.stroke();

        ctx.closePath();

        //2.画 内线

        ctx.beginPath();

        var xCenter = (point4[0] - point1[0]) / 2 + point1[0];

        var yCenter = (point4[1] - point1[1]) / 2 + point1[1];

        //横线

        moveTo([point1[0], yCenter]);

        lineTo([point4[1], yCenter]);

        ctx.stroke();

        moveTo([xCenter, point1[1]]);

        lintTo([xCenter, point4[0]]);

        ctx.stroke();

        ctx.closePath();

        //1.画 边线

        ctx.lineWidth = 2;

        ctx.lineCap = 'square';

        ctx.strokeStyle = '#FE0000';

        ctx.beginPath();

        moveTo(point1);

        lineTo(point2, point4, point3, point1);

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

    }

    function lineTo() {

        for (var i = 0; i < arguments.length; i++) {

            var item = arguments[i];

            lintTo(item);

        }

    }

    function lintTo(point) {

        ctx.lineTo(point[0], point[1]);

    }

    function moveTo(point) {

        ctx.moveTo(point[0], point[1]);

    }

    drawLine();

    function setValue(text) {

        //清屏幕

        ctx.clearRect(0, 0, canvasOne.width, cancasOne.height);

        ctx.fillStyle = 'white';

        ctx.fillRect(0, 0, cancasOne.width, cancasOne.height);

        //画参考线

        drawLine();

        //画字

        ctx.font = 'bold 140px 楷体';

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        ctx.fillStyle = 'black';

        ctx.fillText(text, canvasOne.width / 2,

            canvasOne.height / 2);

    }

    var inputOne = document.getElementById('inputOne');

    inputOne.onchange = function () {

        console.info(inputOne.value);

        setValue(inputOne.value);

    }

</script>