Canvas——文字绘制

最新推荐文章于 2024-04-16 14:50:07 发布

_洋

最新推荐文章于 2024-04-16 14:50:07 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/mantou_riji/article/details/128687172

版权

canvas 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML5Canvas中绘制文字，包括设置字体、调整文字对齐方式、基线对齐和测量文本宽度。示例代码演示了fillText和strokeText方法的使用，以及如何控制文本的显示效果和布局。

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

文字绘制

画笔.font = "字体大小字体"
画笔.fillText =（文字内容,x1 ,y1, w） ：x1,y1: 内容的起点； w:内容所占据的最大宽度，超出该宽度会进行压缩
画笔.strokeText = （文字内容,x1 ,y1, w）：和fillText的参数一样

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="1000"
    height="600"
    style="background: lightgray"
    ></canvas>
    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        var ctx = canvas1.getContext("2d")

        ctx.font = "100px Microsoft YaHei"
        ctx.fillText("洋", 200, 200, 100)
        ctx.strokeText("洋", 300, 200, 100)
    </script>
</body>
</html>

在这里插入图片描述

文字样式

水平对齐：画笔.textAlign = 对齐方式，对齐方式： "center"、"start"（默认）、"end"、"left"、"right"
注意这里对齐的参照是通过strokeText("文字"，x1，y1)函数设置的定点（x1,y1）

eg:center样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="1000"
    height="600"
    style="background: lightgray"
    ></canvas>
    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        var ctx = canvas1.getContext("2d")

        ctx.font = "100px Microsoft YaHei"
        ctx.textAlign = "center"
        ctx.strokeText("yang", 300, 300)

        ctx.arc(300,300,5,0,2*Math.PI)
        ctx.fillStyle = "red"
        ctx.fill()
    </script>
</body>
</html>

在这里插入图片描述

基线对齐：画笔.textBaseline= 对齐方式，对齐方式： "top"、"bottom"、"middle"、"alphabetic"（文本基线对齐，默认） ，
文本方向：画笔.direction = 方向，方向："ltr"（从左到右）、"rtl"(从右到左)

文本宽度

预测量文本宽度：
画笔.measureText("文字")
eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="1000"
    height="600"
    style="background: lightgray"
    ></canvas>
    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        var ctx = canvas1.getContext("2d")

        ctx.font = "100px Microsoft YaHei"
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        ctx.direction = "rtl"
        ctx.strokeText("yang", 300, 300)

        // 预测量文本宽度
        const msg = ctx.measureText("yang")
        console.log(msg);

        ctx.arc(300,300,5,0,2*Math.PI)
        ctx.fillStyle = "red"
        ctx.fill()
    </script>
</body>
</html>