33 canvas绘制文本

最新推荐文章于 2024-04-16 14:50:07 发布

丨Anna丨

最新推荐文章于 2024-04-16 14:50:07 发布

阅读量395

点赞数

分类专栏： # canvas 前端重拾文章标签： canvas

本文链接：https://blog.csdn.net/u014331138/article/details/109360526

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

canvas

14 篇文章 0 订阅

订阅专栏

33 canvas绘制文本

1 绘制文本

语法

canvas 提供了两种方法来渲染文本:
		fillText(text, x, y)
			在指定的(x,y)位置填充指定的文本
		strokeText(text, x, y)
			在指定的(x,y)位置绘制文本边框

示例

	<head>
		<meta charset="UTF-8">
		<title>18_绘制文本</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillText("HELLO",50,50);
				ctx.strokeText("HELLO",50,100);
			}
		</script>
	</body>

效果

2 设置文本样式

语法

	font = value
		当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 
		默认的字体是 10px sans-serif。
		font属性在指定时，必须要有大小和字体 缺一不可
		
	textAlign = value
		文本对齐选项. 可选的值包括： left, right  center. 
		left
			文本左对齐。
		right
			文本右对齐。
		center
			文本居中对齐。
			这里的textAlign="center"比较特殊。textAlign的值为center时候
			文本的居中是基于你在fillText的时候所给的x的值，
			也就是说文本一半在x的左边，一半在x的右边
		
	
	textBaseline = value
		描述绘制文本时，当前文本基线的属性。
		top
			文本基线在文本块的顶部。
		middle
			文本基线在文本块的中间。
		bottom
			文本基线在文本块的底部。

解析

示例

	<head>
		<meta charset="UTF-8">
		<title>18_绘制文本</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				// 设置字体
				ctx.font = "40px sans-serif";
				// 设置文本对齐方式
				ctx.textAlign = "center";
				// 设置文本基线
				ctx.textBaseline = "middle";
				ctx.fillText("HELLO",100,50);
				ctx.strokeText("HELLO",100,100);
			}
		</script>

效果

3 获取文本宽度

语法

measureText() 方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度，没有高度）

示例

	<head>
		<meta charset="UTF-8">
		<title>20_文本居中</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				// 设置字体
				ctx.font = "40px sans-serif";
				// 设置文本基线
				ctx.textBaseline = "top";
				var textObj = ctx.measureText("HELLO");
				ctx.fillText("HELLO",(canvas.width - textObj.width)/2 , (canvas.height - 40)/2);
			}
		</script>
	</body>

效果