canvas绘制文字 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 设置文字的属性
        * ctx.font = 和css语法一样。
        * 注意：这里设置字体大小时必须带单位，单位支持css的所有表示方式。
        * 注意：单独设置字体大小不会生效，必须要加一个额外属性样式。
        * */

        ctx.font = '2rem 微软雅黑';

        /*
        * 绘制描边文字：
        * ctx.strokeText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
        * */

        ctx.strokeText( '嘻嘻嘻嘻嘻嘻', 100, 100 );

        /*
         * 绘制填充文字：
         * ctx.fillText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
         * */

        ctx.fillText( '咯咯咯咯咯咯', 100, 200 );


        // 绘制文字的参考点
        ctx.beginPath();
        ctx.arc( 100, 100, 4, 0, Math.PI * 2 );
        ctx.fill();
        ctx.beginPath();
        ctx.arc( 100, 200, 4, 0, Math.PI * 2 );
        ctx.fill();
    </script>
</body>
</html>

对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        ctx.font = '2rem 微软雅黑';

        /*
        * 设置文字的水平对其方式：
        * ctx.textAlign = 'left || start' 、 'right || end' 、 'center'
        * 默认值为start。
        * */

        /*
        * 设置文字的垂直对其方式：
        * ctx.textBaseline = 'top' 、'bottom'、'middle'、'alphabetic'、'hanging'、'ideographic'
        * 默认值为alphabetic。
        * */

        ctx.textAlign = 'left';
        ctx.textBaseline = 'ideographic';
        ctx.fillText( '咯咯咯咯咯咯', 100, 200 );

        // 绘制文字的参考点
        ctx.beginPath();
        ctx.arc( 100, 200, 4, 0, Math.PI * 2 );
        ctx.fill();
    </script>
</body>
</html>

 

posted @ 2017-08-15 17:56  坑坑如也  阅读(2059)  评论(0)    收藏  举报