H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境)

最新推荐文章于 2023-09-04 11:28:10 发布

良月生秋

最新推荐文章于 2023-09-04 11:28:10 发布

阅读量1k

点赞数

分类专栏：前端 html 面试文章标签：动画 css3 css

本文链接：https://blog.csdn.net/m0_54866636/article/details/123099840

版权

1. 绘制文字

**ctx.font；**设置文本内容的字体属性，使用方式与 css font 相同

**ctx.textAlign；**设置文本内容的对齐方式

start：默认，文本在指定的位置开始

end：文本在指定的位置结束

center：文本的中心被放置在指定的位置

left：文本左对齐

right：文本右对齐

**ctx.textBaseline；**设置绘制文本时使用的当前文本基线

alphabetic：默认，文本基线是普通的字母基线

top：文本基线是 em 方框的顶端

hanging：文本基线是悬挂基线

middle：文本基线是 em 方框的正中心

ideographic：文本基线是 em 基线

bottom：文本基线是 em 方框的底端

**ctx.fillText()；**填充文本

**ctx.strokeText()；**绘制文本（无填充）

**ctx.measureText()；**返回包含指定文本宽度的对象

接下来我们在上文饼状图案例的基础上绘制文字：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>绘制饼状图&文字</title>
  <style></style>
</head>

<body>
  <div>
    <canvas id="table"><

最低0.47元/天解锁文章

良月生秋

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
H5画布 canvas 入门到精通 _ 第二部分(绘制文字、图片、坐标系，canvas颜色和样式，canvas绘制环境)

目录1. 绘制文字2. 绘制图片(drawImage)（1）基本绘制方法（2）案例：序列帧动画3. 绘制坐标系4. canvas 颜色样式和阴影5.?复杂样式（1）渐变（2）绘制背景图（3）变换（重点）6. 绘制环境的相关操作1. 绘制文字**ctx.font；**设置文本内容的字体属性，使用方式与 css font 相同**ctx.textAlign；**设置文本内容的对齐方式start：默认，文本在指定的位置开始end：文本在指定的位置结束center：文本的中
复制链接

扫一扫