canvas-文字

最新推荐文章于 2025-03-13 10:38:31 发布

十里夜

最新推荐文章于 2025-03-13 10:38:31 发布

阅读量804

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.youkuaiyun.com/hgyu_962464/article/details/54893145

版权

canvas 专栏收录该内容

13 篇文章

订阅专栏

本文通过HTML5的canvas元素，展示了如何设置字体样式、描边与填充文字、以及实现文字在画布上的水平和垂直居中对齐。示例代码详细地解释了每个步骤，包括设置字体大小、颜色以及坐标参考点的调整。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas-文字</title>
    <style>
        #canvas{
            border: 1px solid palevioletred;
        }
    </style>
    <script>
      window.onload = function (){
          //获取到canvas元素
          var canvas = document.getElementById('canvas');
          //获取canvas中的画图环境
          var context = canvas.getContext('2d');
         //设置字体的大小格式
          context.font="50px 黑体";
          //描边字体
          //显示文字 .strokeText('文字内容',显示位置X坐标,显示位置Y坐标,显示文字所占的宽度（可省：不做限制）);
          context.strokeText('何问起',50,50);

          //填充字体 .fillText('文字内容',显示位置X坐标,显示位置Y坐标,显示文字所占的宽度（可省：不做限制）);
          context.fillText("何问起",300,50,50);


          //即填充又描边 字体
          //设置描边属性
          context.strokeStyle = 'green';
          //设置描边线条的宽度
          context.lineWidth = 5;
          context.strokeText('何问起',150,480);
          //设置填充属性
          context.fillStyle = 'orange';
          context.fillText("何问起",150,480);


          //设置文字在该坐标点，怎么居中/如何对齐
          //设置坐标参考点
          context.fillRect(250,250,10,10);
          //设置水平居中 主要属性：left,right,center
          context.textAlign = 'center';
          //设置上下居中 主要属性：top,bottom,middle
          context.textBaseline = 'middle';

          context.lineWidth = 1;
          context.font='100px 楷体';
          context.strokeText('梅',250,250);

      }
    </script>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px">
    </canvas>
</body>
</html>