Canvas 绘制文字(strokeText(),fillText())

最新推荐文章于 2025-05-29 09:29:05 发布

原创最新推荐文章于 2025-05-29 09:29:05 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #绘制文字 #fillText #strokeText

Canvas 专栏收录该内容

33 篇文章

订阅专栏

本文深入探讨HTML5 Canvas API中用于文字绘制的方法strokeText()和fillText()，通过实例代码演示如何在画布上填充和描边文字，帮助开发者理解并掌握这两者在图形绘制中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.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 = 和css语法一样。
        * 注意：这里设置字体大小时必须带单位，单位支持css的所有表示方式。
        * 注意：单独设置字体大小不会生效，必须要加字体样式(微软雅黑)。
        * */

        ctx.font = '3em 微软雅黑';

        /*
        * 绘制描边文字：
        * 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>