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 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>
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
嗯嗯，很漂亮，应该可以弄到帖子做图里去呢{:4_173:} 红影 发表于 2022-3-1 20:37
嗯嗯，很漂亮，应该可以弄到帖子做图里去呢
这个先要全面掌握 加林森 发表于 2022-3-1 20:28
嗯嗯，我不急的。
{:5_108:} 马黑黑 发表于 2022-3-1 21:01
{:4_190:} 马黑黑 发表于 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
我彻底学不会了
了解一下也好的
页:
[1]
2