HTML5画布之本文操作

马黑黑

有消息称谷歌未来将使用canvas来布局它的网站，我想部分原因可能与画布对文本的友好支持有关。canvas有完备的文本属性和方法，可能常用到的有：

一、属性

1. font 字体属性
2. textAlign 文本内容的对齐方式
3. textBaseline 文本基线

二、方法

1. fillText(Text,x,y) 绘制实心文本（填充方式）
2. strokeText(Text,x,y) 上绘制空心文本（无填充）

在画布上输出文本还是相对简单的，似乎没什么难度，试看：

<canvas id="cvtxt" width="400" height="200">你的浏览器不支持canvas</canvas>

<script>

var txt = document.getElementById('cvtxt');
var txtc = txt.getContext('2d');
txtc.font = "50px 黑体";
txtc.fillStyle = "red"; // 填充色
txtc.strokeStyle = "blue"; // 边框色
txtc.fillText("花潮论坛",10,50); // 实心字
txtc.strokeText("花潮论坛",10,120); // 空心字

</script>

JS代码中，我们为什么设置了填充色和边框色？填充色基于实心字，对空心字无效；反之，边框色基于空心字。画布里的字虽然有字体属性，但它们同样属于图像，所以具备图像的填充、边框等颜色的属性。

我们还可以通过创建渐变颜色在画布上画出多彩的文本，这个以后再去讨论。

最后简单说一下文本对齐，textAlign 和 textBaseline 属性，前者基于水平方向、后者基于垂直方向，它们的对齐行为不同于我们接触过的元素，是分别基于文本绘制方式的 x 和 y 坐标值。

马黑黑

你的浏览器不支持canvas

红影

fillText(Text,x,y) 这里xy的坐标基点在哪，看二楼，貌似左上角？
有xy的定位，textAlign 和 textBaseline 的对齐怎么可能实现？

红影

这个有趣，出现的文字不再能涂黑选取，而是成了图片方式的存在，还是png格式的。

马黑黑

红影 发表于 2022-3-1 12:39
这个有趣，出现的文字不再能涂黑选取，而是成了图片方式的存在，还是png格式的。

画布里的元素整体保存时是png的，以前我用过它来制作过web页的logo

马黑黑

红影 发表于 2022-3-1 12:33
fillText(Text,x,y) 这里xy的坐标基点在哪，看二楼，貌似左上角？
有xy的定位，textAlign 和 textBaselin ...

是在左上角。

所以，如果要在画布上居中，设定xy就很讲究，得让它们置于画布中央

加林森

有又新教程了。学习学习。

马黑黑

加林森 发表于 2022-3-1 19:07
有又新教程了。学习学习。

这个有些难度，有需要的慢慢体会

加林森

马黑黑 发表于 2022-3-1 19:41
这个有些难度，有需要的慢慢体会

嗯嗯，我不急的。

红影

马黑黑 发表于 2022-3-1 13:14
画布里的元素整体保存时是png的，以前我用过它来制作过web页的logo

嗯嗯，很漂亮，应该可以弄到帖子做图里去呢

马黑黑

红影 发表于 2022-3-1 20:37
嗯嗯，很漂亮，应该可以弄到帖子做图里去呢

这个先要全面掌握

马黑黑

加林森 发表于 2022-3-1 20:28
嗯嗯，我不急的。

加林森

马黑黑 发表于 2022-3-1 21:01

红影

马黑黑 发表于 2022-3-1 13:30
是在左上角。

所以，如果要在画布上居中，设定xy就很讲究，得让它们置于画布中央

嗯嗯，知道了，圆心定位很重要。

小辣椒

这些都是HTML5画布的基础知识，想玩好必须得先懂这些东西，这个多看几遍会了

小辣椒

黑黑，越来越难了

马黑黑

小辣椒 发表于 2022-3-1 21:57
黑黑，越来越难了

这个的确有难度的

马黑黑

红影 发表于 2022-3-1 21:48
嗯嗯，知道了，圆心定位很重要。

貌似如此

小辣椒

马黑黑 发表于 2022-3-1 22:23
这个的确有难度的

我彻底学不会了

马黑黑

小辣椒 发表于 2022-3-1 22:28
我彻底学不会了

了解一下也好的