html5 canvas元素字体绘制

最新推荐文章于 2025-02-13 17:14:43 发布

JRJ1637

最新推荐文章于 2025-02-13 17:14:43 发布

阅读量2.4k

点赞数

分类专栏： html 文章标签： html5 canvas元素字体绘制

本文链接：https://blog.youkuaiyun.com/JRJ1637/article/details/53682186

版权

html 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何在HTML5的canvas元素中进行字体的绘制。通过设置不同的属性，如lineWidth、strokeStyle、fillStyle和font，可以实现文字的空心、实心以及带有边框的效果。示例代码展示了在canvas上绘制隶书字体的过程。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           canvas{background: #b8edc9;}
       </style>
   </head>
   <body>
       <h5>Canvas</h5>
       <canvas id="mycanvas" width="1000" height="1000">
           您的浏览器不支持html5dcanvas元素
       </canvas>
   <script type="text/javascript">
       var canvas=document.getElementById('mycanvas');//定义变量获取画布dom
       var c=mycanvas.getContext('2d');//设置绘图环境2d


         //绘制文字

        c.lineWidth=1;
        c.strokeStyle="fuchsia";
        c.fillStyle="blue";
        c.font="40px 隶书"//设置字体格式font="大小字体"
        c.strokeText("帅",344,390);//设置空心字体
        c.fillText("帅",344,450);//设置实心字体
        c.strokeText("帅",50,520);//设置有边的实心字体
        c.fillText("帅",50,520);






       </script>

   </body>

</html>