canvas——绘制文字

最新推荐文章于 2024-03-12 15:41:13 发布

sleepwalker_1992

最新推荐文章于 2024-03-12 15:41:13 发布

阅读量4.3w

点赞数 5

分类专栏： canvas

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80571333

版权

canvas 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1、绘制上下文的文字属性

font 设置或返回文本内容的当前字体属性
* font 属性使用的语法与 CSS font 属性相同。

例如：ctx.font = "18px '微软雅黑'";

textAlign 设置或返回文本内容的当前对齐方式
* start : 默认。文本在指定的位置开始。
* end : 文本在指定的位置结束。
* center: 文本的中心被放置在指定的位置。
* left : 文本左对齐。

* right : 文本右对齐。

例如：ctx.textAlign = 'left';

textBaseline 设置或返回在绘制文本时使用的当前文本基线
* alphabetic ：默认。文本基线是普通的字母基线。
* top ：文本基线是 em 方框的顶端。。
* hanging ：文本基线是悬挂基线。
* middle ：文本基线是 em 方框的正中。
* ideographic：文本基线是em基线。

* bottom ：文本基线是 em 方框的底端。

例如： ctx.textBaseline = 'top';
单词:
alphabetic: 字母的；照字母次序的 [,ælfə'bɛtɪk]

ideographic：表意的；表意字构成的英 [,ɪdɪəʊ'ɡræfɪk] 美 [,ɪdɪə'græfɪk]

2、上下文绘制文字方法

* ctx.fillText() 在画布上绘制“被填充的”文本
* ctx.strokeText() 在画布上绘制文本（无填充）
* ctx.measureText() 返回包含指定文本宽度的对象
* 单词：measure 测量；估量；权衡英 ['meʒə] 美 ['mɛʒɚ]

//综合案例代码：
ctx.moveTo( 300, 300 );
ctx.fillStyle = "purple"; //设置填充颜色为紫色
ctx.font = '20px "微软雅黑"'; //设置字体
ctx.textBaseline = "bottom"; //设置字体底线对齐绘制基线
ctx.textAlign = "left"; //设置字体对齐的方式
//ctx.strokeText( "left", 450, 400 );

ctx.fillText( "Top-g", 100, 300 ); //填充文字

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Canvas文字绘制</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>

	<script>
		(function(){
			var canvas = document.querySelector('#cavsElem');
			var ctx = canvas.getContext('2d');

			canvas.width = 900;
			canvas.height = 600;
			canvas.style.border = "1px solid #000";

			// =S 绘制坐标参照系
			ctx.beginPath();
			ctx.moveTo(0,301);
			ctx.lineTo(900,301);
			ctx.strokeStyle = "teal";			
			ctx.stroke();		

			ctx.moveTo(450,0);
			ctx.lineTo(450,600);
			ctx.stroke();

			ctx.fillRect(445,295,10,10);
			// =E 绘制坐标参照系

			//绘制字体
			ctx.font = '20px "微软雅黑"';
			ctx.fillStyle = "red";
			ctx.textBaseline = "top";
			ctx.fillText("Top-g", 100, 300);

			ctx.textBaseline = "middle";
			ctx.fillText("middle-g", 200, 300);

			ctx.textBaseline = "bottom";
			ctx.fillText("bottom-g", 490, 300);

			ctx.textBaseline = "Alphabetic";
			ctx.fillText("Alphabetic-g", 700, 300);


			//绘制字体 设置对齐方式
			ctx.fillStyle = "purple";
			ctx.textAlign = "left";
			ctx.strokeText("left", 450, 400);

			ctx.textAlign = "right";
			ctx.strokeText("right", 450, 440);

			ctx.textAlign = "start";
			ctx.strokeText("start", 450, 480);

			ctx.textAlign = "end";
			ctx.strokeText("end", 450, 520);

			ctx.textAlign = "center";
			ctx.strokeText("center", 450, 560);

		}());
	</script>
</body>
</html>

效果：

sleepwalker_1992

关注

5
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
canvas——绘制文字

1、绘制上下文的文字属性font 设置或返回文本内容的当前字体属性 * font 属性使用的语法与 CSS font 属性相同。例如：ctx.font = "18px '微软雅黑'";textAlign 设置或返回文本内容的当前对齐方式 * start : 默认。文本在指定的位置开始。 * end : 文本在指定的位置结束。 ...
复制链接

扫一扫