Canvas 绘制文本注意事项

我在这里这几章节教程的时候,思考了很多点,也遇到了很多问题

1. 为什么没有测量文本高度的方法

当我整理完 Canvas 预测文本宽度 measureText 的时候,我就在思考这个问题

直到在章节末尾,我自己画了一个按钮,我才知道,其实不用给测量文本高度的方法

还记得 Canvas 文字垂直对齐 textBaseline 章节中的 七线六格 图吗,其实我们设定的文字大小就是一行文本的高度

如果有多行文本呢?这就涉及到另一个非常有意思的问题

2. 绘制文本时的换行符不起作用 ?

不管用哪个方法,当文本内容超过一定的宽度的时候,要么不显示,要么字体变小缩放显示(第四个参数)

不信你看看这个范例

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="500" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.font = "22px Microsoft YaHei";

ctx.fillText("简\n单\r教\r\n程",50,50);
ctx.fillText("简\n单\r教\r\n程",50,100,30);
</script>

运行结果如下


看到没有? \r\n 带来的效果只是一个简单的空格

而且当我们设置了文本宽度的时候,如果内容超出大小,还会自己缩放

我翻遍了全部的 API,没有一个方法用来绘制多段文本

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.