canvas 绘制包含10个换行(‘\n’)文字例子,要求可以设置行高,文字最后整体在canvas的高度垂直居中

最新推荐文章于 2024-08-11 23:28:33 发布

力博荣三维可视化

最新推荐文章于 2024-08-11 23:28:33 发布

阅读量897

点赞数

分类专栏： gpt 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_21476953/article/details/131591946

版权

gpt 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该示例代码展示了如何使用HTML5Canvas在canvas上绘制包含10个换行的文字，同时设置自定义行高并实现文字整体在canvas高度上的垂直居中对齐。代码通过分割字符串、计算总高度和开始位置实现这一功能。

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

canvas 绘制包含10个换行(‘\n’)文字例子,要求可以设置行高,文字最后整体在canvas的高度垂直居中。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Text Example</title>

    <style>
        #mycanvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>

<canvas id="mycanvas" width="800" height="600"></canvas>

<script type='text/javascript'>

  let canvas = document.getElementById("mycanvas");
  let ctx = canvas.getContext('2d');

  // 文字内容和行高
  const textContent = "This is line\n".repeat(10);
  const lineHeight = 30;

  // 将字符串分割成多行
  const lines = textContent.split('\n').filter(Boolean);

  // 计算总体需要的高度（文字数量 * 行高）
   totalHeight = lines.length * lineHeight;

   // 计算开始位置, 垂直居中整体文字
   startY = (canvas.height - totalHeight) /2;


   ctx.font ='20px Arial';
   ctx.textBaseline='top';


     for(let i=0; i< lines.length; i++){
         // 绘制每一行, 并增加偏移量.
         ctx.fillText(lines[i],50,startY+ lineHeight*i)
     }

</script>


</body>
</html>