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

最新推荐文章于 2024-07-04 15:52:48 发布

houyanhua1

最新推荐文章于 2024-07-04 15:52:48 发布

阅读量3.8k

点赞数

分类专栏： Canvas 文章标签： canvas 绘制文字 fillText strokeText

本文链接：https://blog.csdn.net/houyanhua1/article/details/79942054

版权

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

摘要由CSDN通过智能技术生成

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轴坐标，限制文字的最大长度(可选)(会水平挤压

最低0.47元/天解锁文章

houyanhua1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas 绘制文字(strokeText(),fillText())

demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; canvas {
复制链接

扫一扫

专栏目录