Canvas 文本绘制

文本绘制

Canvas 2D API 提供了两种绘制文本的方法和一个检查字体宽度的方法

方法变量说明

变量名	类型	是否必须	说明
text	string	是	待填充文字
x	Number	是	指定左上角位置的X坐标
y	Number	是	指定左上角位置的Y坐标
maxWidth	Number	否	绘制的最大宽度，如果文本没有达到最大宽度大小，按正常显示，如果超过了设置的最大宽度，则会压缩文本宽度到设定值

填充文本

填充文本语法

在指定的位置填充文本，可选绘制的最大宽度
即绘制的文本为实心

fillText(text, x, y [, maxWidth])

填充文本示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		//没有配置最大宽度
		ctx.fillText("Hello IMooc",10,50);
	</script>
</body>
</html>

空心文本

绘制空心文本语法

在指定的(x,y)位置绘制文本边框，可选绘制的最大宽度
即绘制的文本为空心

strokeText(text, x, y [, maxWidth])

绘制空心文本示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		//传入最大宽度
		ctx.strokeText("Hello IMooc",10,50, 100);
	</script>
</body>
</html>

检查文本宽度

检查文本宽度语法

此方法返回一个被测量文本 TextMetrics 对象
此对象包含了例如 text文字所占宽度width、文本矩形边界右侧距离等多个属性

measureText(text)
检查文本宽度示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c = document.getElementById("imooc");
		var ctx = c.getContext("2d");
		var txt = "Hello IMooc"
		// measureText不会渲染canvas，知识返回了一个包含多个属性的对象
		var textMetricsObj = ctx.measureText(txt)
		alert(textMetricsObj.width)
	</script>
</body>
</html>

文本样式

Canvas 2D API文本绘制提供了四个设置文本样式的属性，我们一个一个来看

字体设置 .font

字体设置 .font 说明

.font 是 Canvas 2D API 描述绘制文字时，为当前字体样式设置的属性。
使用和 CSS font 规范相同的字符串值。
默认值: 10px sans-serif

语法

ctx.font = value;

参数说明

变量名	类型	是否必须	说明
value	string	是	符合CSS中font的语法字符串

字体设置示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		//设置了字体大小，和字体样式
		ctx.font="30px Microsoft YaHei,SimSun,Arial";
		ctx.fillText("Hello IMooc",10,50);
	</script>
</body>
</html>

对齐设置 .textAlign

对齐设置 .textAlign 说明

.textAlign 是 Canvas 2D API 提供的设置文本对其方式的属性。
默认值: start

特别说明
该对齐方式是针对 .fillText/.strokeText 方法的 X 的值。所以如果 textAlign="center"，那么该文本将画在 x-50%*width的位置

语法

ctx.textAlign = value;

value值说明

value可取如下值

value	说明	特别说明
left	文本左对齐	对齐方式是针对 .fillText/.strokeText 方法的 X 的值
right	文本右对齐	对齐方式是针对 .fillText/.strokeText 方法的 X 的值
center	文本居中对齐	对齐方式是针对 .fillText/.strokeText 方法的 X 的值
start	文本对齐界线开始的地方,默认左对齐	搭配direction属性使用，ltr：从左向右，rtl：从右向左
end	文本对齐界线结束的地方,默认右对齐	搭配direction属性使用，ltr：从左向右，rtl：从右向左.

补充

如果你想让文本在整个canvas居中，只需要将fillText的x值设置成canvas的宽度的一半，.textAlign值设置成center。
start和stop默认情况下是等同于left和right的。如果设置direction的值为：rtl，则刚好相反
direction属性还未被纳入标准文档，兼容性很差，所以针对start和end的使用参照left和right

对齐设置示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		//X的值为175，在画布正中间
		ctx.font="30px Microsoft YaHei,SimSun,Arial";
		ctx.textAlign="left"
		ctx.fillText("Left Imooc",175,50);
		ctx.textAlign="center"
		ctx.fillText("Center IMooc",175,100);
		ctx.textAlign="right"
		ctx.fillText("Right IMooc",175,150);
	</script>
</body>
</html>

垂直对其设置 .textBaseline

垂直对其设置 .textBaseline 说明

.textBaseline 是 Canvas 2D API 提供的文本垂直对齐的属性（基线对齐属性）。
默认值: alphabetic

语法

ctx.textBaseline = value;

value值说明

value可取如下值

value	说明	特别说明
top	文本基线在文本块的顶部
hanging	文本基线是悬挂基线
middle	文本基线在文本块的中间
alphabetic	文本基线是标准的字母基线。
ideographic	文字基线是表意字基线	如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
bottom	文本基线在文本块的底部	与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

补充

如果你想让文本在整个canvas居中，只需要将fillText的x值设置成canvas的宽度的一半，.textAlign值设置成center。
start和stop默认情况下是等同于left和right的。如果设置direction的值为：rtl，则刚好相反
direction属性还未被纳入标准文档，所以兼容性很差，不建议使用

字体设置示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		ctx.font="30px Microsoft YaHei,SimSun,Arial";
		
		//设置了不同垂直对齐方式
		ctx.textBaseline="top"
		ctx.fillText("TOPtop",0,50, 100);
		ctx.textBaseline="hanging"
		ctx.fillText("HANGING hanging",150,50, 100);
		ctx.textBaseline="middle"
		ctx.fillText("MIDDLEmiddle",305,50);
	</script>
</body>
</html>

文本方向设置 .direction

文本方向设置 .direction 说明

.textBaseline 是 Canvas 2D API 提供的文本垂直对齐的属性（基线对齐属性）。
默认值: inherit

语法

ctx.textBaseline = value;

value值说明

value可取如下值

value	说明	特别说明
ltr	文本方向从左向右。	left to right 缩写
rtl	文本方向从右向左。	right to left 缩写
inherit	根据情况继承 canvas 元素或者 Document	默认从左向右
补充

direction属性还未被纳入标准文档，所以兼容性很差，不建议使用

字体设置示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
</head>
<body>
	
	<canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;">
		您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
	
	<script>
		var c=document.getElementById("imooc");
		var ctx=c.getContext("2d");
		ctx.font="30px Microsoft YaHei,SimSun,Arial";
		
		//设置了不同垂直对齐方式
		ctx.direction = "ltr";		
		ctx.fillText("Hello IMooc",305,50);
	</script>
</body>
</html>

posted @ 2020-04-18 00:50 水车阅读(920) 评论(0) 编辑收藏举报

刷新页面返回顶部

加载中...

ShuiChe’s Blog

用代码实现财务自由

Canvas 文本绘制

文本绘制

填充文本

空心文本

检查文本宽度

文本样式

字体设置 .font

对齐设置 .textAlign

垂直对其设置 .textBaseline

文本方向设置 .direction

公告