strokeText()方法

最新推荐文章于 2025-05-01 22:08:44 发布

雅痞子军

最新推荐文章于 2025-05-01 22:08:44 发布

阅读量2.5k

点赞数

分类专栏： HTML5 JavaScript

本文链接：https://blog.youkuaiyun.com/qq_1724201421/article/details/80209230

版权

JavaScript 同时被 2 个专栏收录

18 篇文章

订阅专栏

HTML5

5 篇文章

订阅专栏

在Canvas中，我们可以使用strokeText()方法来绘制“描边文本”。“描边文本”是指空心的文本。

语法：

strokeText(text,x,y,maxWidth);

说明：

参数text是一个字符串文本。

参数x表示文本的x坐标，也就是文本最左边的坐标。

参数y表示文本的y坐标，也就是文本最下边的坐标（注意是最下边，而不是最上边）。

参数maxWidth是可选参数，表示允许的最大文本的宽度（单位为px）。如果文本宽度超出maxWidth值，文本会压缩至maxWidth值的宽度。

看下面一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>strokeText()方法</title>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        window.οnlοad=function(){
            var cnv=$('canvas');
            var cxt=cnv.getContext("2d");

            var txt='伟大的祖国';
            cxt.font='bold 30px 微软雅黑';  //注意是cxt.font而不是txt.font
            cxt.strokeStyle='skyblue';
            cxt.strokeText(txt,30,60);
        };
    </script>
</head>
<body>
    <canvas id="canvas" width=200 height=150 style="border:1px solid grey;"></canvas>
</body>
</html>

浏览器预览效果图如下：