HTML5 Canvas Text实例1

1.简单实例1

<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>

2.实例2：

<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>

3.实例3：

<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>