canvas font-size 属性

最新推荐文章于 2025-11-04 04:44:47 发布

原创最新推荐文章于 2025-11-04 04:44:47 发布 · 1.6w 阅读

1 ·

CC 4.0 BY-SA版权

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了HTML5 Canvas中字体大小的限制问题，特别是当font-size小于14像素时，文字显示不再随设置缩小的现象。通过示例代码演示不同字体大小的效果。

在H5中，canvas是其一个重要的亮点和特性。

其中canvas的font-size属性和css的完全不同，w3c中定义如下

font-size / line-height	规定字号和行高，以像素计。

font-size / line-height

规定字号和行高，以像素计。

是以像素来渲染字体的，所有当font-size小于某个值时（一般是14）就会出现，textt的字符串不会变小（因为已经无法减少像素的数目，来呈现字体了。）

例子如下：当字体大小为25时：

<!DOCTYPE html>
<html>
	<body>

		<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
			Your browser does not support the HTML5 canvas tag.
		</canvas>

		<script>
		console.log(this);
			var c=document.getElementById("myCanvas");
			var ctx=c.getContext("2d");

			ctx.font="25px Arial";
			ctx.textBaseline="top";
			ctx.fillStyle = "red";
			ctx.fillText("Hello World",0,0);
			
		</script>

	</body>
</html>

效果如下：

当字体大小为14时：

<!DOCTYPE html>
<html>
	<body>

		<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
			Your browser does not support the HTML5 canvas tag.
		</canvas>

		<script>
		console.log(this);
			var c=document.getElementById("myCanvas");
			var ctx=c.getContext("2d");

			ctx.font="14px Arial";
			ctx.textBaseline="top";
			ctx.fillStyle = "red";
			ctx.fillText("Hello World",0,0);
			
		</script>

	</body>
</html>

效果如下：

当字体大小为5时：

<!DOCTYPE html>
<html>
	<body>

		<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
			Your browser does not support the HTML5 canvas tag.
		</canvas>

		<script>
		console.log(this);
			var c=document.getElementById("myCanvas");
			var ctx=c.getContext("2d");

			ctx.font="5px Arial";
			ctx.textBaseline="top";
			ctx.fillStyle = "red";
			ctx.fillText("Hello World",0,0);
			
		</script>

	</body>
</html>

效果如下：