html5笔记4 — canvas绘制文字

最新推荐文章于 2025-05-17 15:06:43 发布

erdouzhang

最新推荐文章于 2025-05-17 15:06:43 发布

阅读量813

点赞数

CC 4.0 BY-SA版权

分类专栏： html5+css3

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/61224356

html5+css3 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在HTML5的canvas元素中绘制文字，包括设置字体样式、填充和描边文字，以及调整文字的水平和垂直对齐方式。示例代码展示了如何使用`font`、`fillText`和`strokeText`等方法来实现文字绘制。

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

绘制文字

这里写图片描述

html代码：

<body onload="draw('canvas');">
 <canvas id="canvas" width="500" height="350"></canvas>
</body>

js代码：

function draw(id){
  // 1.获取canvas的id
  var canvas = document.getElementById('canvas');
  // 2.取得上下文
  var context = canvas.getContext('2d');
  // 3.设置背景颜色、填充背景区域
  context.fillStyle = "#f45da9";
  context.fillRect(0,0,500,350);
  // 4.设置文字字体
  context.font = "700 40px 微软雅黑";
  // 5.设置文字垂直方式对齐
  context.textBaseline = 'top';
  // 6.设置文字水平方式对齐
  context.textAlign = 'start';
  // 设置文字颜色、绘制字符串
  context.fillStyle = "#fff";
  context.fillText('HTML5',50,50);
  // 轮廓方式填充字符串
  context.strokeStyle = "#fff";
  context.strokeText('学习HTML5',20,100);
}

解析：
context.font = “700 40px 微软雅黑”;是设置文字字体，参数分别是：字体粗细，字体大小。
context.fillText(‘HTML5’,50,50); 是绘制字符串，参数分别是：绘制的文字，横坐标x轴的距离，纵坐标y轴的距离。
context.strokeText(‘学习HTML5’,20,100);是轮廓方式填充字符串，参数分别是：绘制的文字，横坐标x轴的距离，纵坐标y轴的距离。
context.textBaseline = ‘alphabetic’; 是设置文字垂直方式对齐
属性还可以是：top(顶部对齐)、hanging(悬挂)、middle(中间对齐)、bottom(底部对齐)、alphabetic是默认对齐方式；具体如下图：
横线是画布上横线。

这里写图片描述