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

<script>

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

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

    var text = '后会无期',

        textMetrics,

        square_width = 20,

        font_height = 128;

    //画网线

    function drawGrid(color, stepx, stepy) {

        ctx.save();

        ctx.strokeStyle = color;

        ctx.lineWidth = 0.5;

        ctx.fillStyle = '#ffffff';

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

        //画竖线

        for (var i = stepx + 0.5; i < canvasOne.width; i += stepx) {

            ctx.beginPath();

            ctx.moveTo(i, 0);

            ctx.lineTo(i, canvasOne.height);

            ctx.stroke();

        }

        //画横线

        for (var i = stepx + 0.5; i < canvasOne.height; i += stepy) {

            ctx.beginPath();

            ctx.moveTo(0, i);

            ctx.lineTo(canvasOne.width, i);

            ctx.stroke();

        }

        ctx.restore();

    }

    //画文本

    function drawText() {

        ctx.fillStyle = 'orange';

        ctx.strokeStyle = 'cornflowerblue';

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

            canvasOne.height / 2);

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

            cancasOne.height / 2);

    }

    //画中间的小正方形

    function drawCenterSquare() {

        ctx.fillStyle = 'rgba(255,0,0,0.4)';

        ctx.strokeStyle = 'black';

        ctx.fillRect(canvasOne.width / 2 - square_width / 2,

            canvasOne.height / 2 - square_width / 2,

            square_width, square_width);

        ctx.strokeRect(canvasOne.width / 2 - square_width / 2,

            cancasOne.height / 2 - square_width / 2,

            square_width, square_width);

    }

    ctx.font = '128px Helvetica';

    ctx.textBaseline = 'middle'; //设置文本的垂直对齐方式

    ctx.textAlign = 'center';//设置文本的水平对齐方式

    textMetrics = ctx.measureText(text);

    drawGrid('lightgray', 10, 10);

    drawText();

    drawCenterSquare();

</script>