专业编程基础技术教程

网站首页 > 基础教程 正文

Canvas学习笔记 | 文本操作 canvas绘制文字

ccvgpt 2024-10-12 13:34:16 基础教程 10 ℃

#头条创作挑战赛#

简介

在Canvas中，文本操作的常用方法有：

Canvas学习笔记 | 文本操作 canvas绘制文字

方法

说明

fillText()

绘制实心文本

strokeText()

绘制空心文本

measureText()

获取文本长度

在Canvas中，文本操作的常用属性有：

方法

说明

font

定义文本字体样式

textAlign

定义文本水平对齐方式

textBaseline

定义文本垂直对齐方式

fillStyle

定义实心文本颜色

stokeStyle

定义空心文本颜色

strokeText()方法

在Canvas中，我们使用strokeText()绘制空心文本。

语法：

ctx.strokeText(text, x, y, maxWidth);

说明：

参数说明：

  • 参数text表示想要绘制的文本字符串；
  • 参数x表示文本的横坐标；
  • 参数y表示文本的纵坐标，是文本最下边的坐标；
  • 参数maxWidth为可选参数，表示文本的最大宽度（单位为像素）。如果文本长度超出maxWidth的值，会将文本压缩至maxWidth。

示例：strokeText()方法示例

示例源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>strokeText()方法示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
    
        var text = "嗨皮汪小成";
        ctx.font = "bold 30px 微软雅黑";
        ctx.strokeStyle = "red";
        ctx.strokeText(text, 50, 50);
      };
    </script>
  </body>
</html>

效果图：

fillText()方法

在Canvas中，我们使用fillText()方法绘制实心文本。

语法：

ctx.fillText(text, x, y, maxWidth);

说明：

参数说明：

  • 参数text表示想要绘制的文本字符串；
  • 参数x表示文本的横坐标；
  • 参数y表示文本的纵坐标，是文本最下边的坐标；
  • 参数maxWidth为可选参数，表示文本的最大宽度（单位为像素）。如果文本长度超出maxWidth的值，会将文本压缩至maxWidth。

示例：fillText()方法示例

示例源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>fillText方法示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
    
        var text = "嗨皮汪小成";
        ctx.font = "bold 30px 微软雅黑";
        ctx.fillStyle = "red";
        ctx.fillText(text, 50, 50);
      };
    </script>
  </body>
</html>

效果图：

measureText()方法

在Canvas中，我们可以使用measureText()方法获取一个文本的长度。measureText()方法返回一个对象，这个对象只有一个width属性，width属性的值即为文本的长度。

语法：

var length = ctx.measureText(text).width;

说明：

参数text表示一个字符串，measureText()方法返回对象的width属性即为这个字符串的长度。

示例：使用measureText()方法使文本水平居中

示例源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>使用measureText()方法使文本水平居中</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
    
        var text = '嗨皮汪小成@掘金';
        ctx.font = '20px bold';

        var textWidth = ctx.measureText(text).width;
        var xPosition = size / 2 - textWidth / 2;
        ctx.fillStyle = 'red';
        ctx.fillText(text, xPosition, 80);
      };
    </script>
  </body>
</html>

效果图：

font属性

在Canvas中，我们使用font属性定义文本的字体样式。context.font的用法与CSS中font属性的用法是一样的。

语法：

ctx.font = "font-style font-weight font-size/line-height font-family"

说明：

font属性的默认是10px sans-serif。定义font属性后，后面的文本会一直延用这些font属性值，直至font属性被重新定义成其它属性值。

因在前面的示例中已经用到了font属性值，这里不再单独编写示例程序。

textAlign属性

在Canvas中，我们使用textAlign属性定义文本水平方向的对齐方式。

语法：

ctx.textAlign = "属性值";

说明：

textAlign属性取值如下表：

属性值

说明

start

文本在指定的横坐标开始

end

文本在指定的横坐标结束

left

文本左对齐

right

文本右对齐

center

文本的中心被放置在指定的横坐标处

示例：textAlign属性示例

示例源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>textAlign属性示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
    
        // 在横坐标150处画一条基准线
        ctx.moveTo(150, 0);
        ctx.lineTo(150, 400);
        ctx.strokeStyle = 'hotpink';
        ctx.stroke();

        ctx.font = '12px bold';

        ctx.textAlign = 'start';
        ctx.fillText('textAlign取值为start', 150, 50);

        ctx.textAlign = 'end';
        ctx.fillText('textAlign取值为end', 150, 100);

        ctx.textAlign = 'left';
        ctx.fillText('textAlign取值为left', 150, 150);

        ctx.textAlign = 'right';
        ctx.fillText('textAlign取值为right', 150, 200);

        ctx.textAlign = 'center';
        ctx.fillText('textAlign取值为center', 150, 250);
      };
    </script>
  </body>
</html>

效果图：

textBaseline属性

在Canvas中，我们使用textBaseline属性定义文本垂直方向的对齐方式。

语法：

ctx.textBaseline = "属性值";

说明：

textBaseline属性取值如下表：

属性值

说明

alphabetic

文本基线是普通英文字母的基线

top

文本基线是em方框的顶端

middle

文本基线是em方框的中心

bottom

文本基线是em方框的底端

示例：textBaseline属性示例

示例源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>textBaseline属性示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        ctx.font = '12px bold';

        // 在纵坐标200处画一条基准线
        ctx.moveTo(0, 200);
        ctx.lineTo(400, 200);
        ctx.strokeStyle = 'hotpink';
        ctx.stroke();

        ctx.font = '12px bold';

        ctx.textBaseline = 'alphabetic';
        ctx.fillText('alphabetic', 50, 200);

        ctx.textBaseline = 'top';
        ctx.fillText('top', 130, 200);

        ctx.textBaseline = 'middle';
        ctx.fillText('middle', 210, 200);

        ctx.textBaseline = 'bottom';
        ctx.fillText('bottom', 290, 200);
      };
    </script>
  </body>
</html>

效果图：



Tags：

猜你喜欢

最近发表
标签列表