htmt5中文本居中在chrome中发现一个问题

最新推荐文章于 2020-12-30 07:41:28 发布

原创最新推荐文章于 2020-12-30 07:41:28 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javaScript #web前端

js 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在Chrome和Firefox浏览器中使用Canvas绘制文本时遇到的文本基线导致的居中显示问题。通过调整textBaseline属性并在Y轴上进行微调，找到了一种在Chrome下实现文本居中的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在火狐下和chrome测试下发现当设置文字居中显示的时候如果在 chrome下设置textBaseline=‘top’的情况下再进行居中文本位置会偏下在火狐下确是正常的为了使文本在chrome下居中显示我们只能用textBaseline=‘bottom’ 再在Y轴居中的情况下 oGc.fillText(str,(oC.width-w)/2,(oC.height-h)/2+h); 解决方案如下

<script type="text/javascript">
		
		var oC=document.getElementById('c1');
		oC.width=400;
		oC.height=400;

		var oGc=oC.getContext('2d');

		var str='你好';

		var h=60;

		
		oGc.font=h+'px x';
		var w=oGc.measureText(str).width;


		oGc.textBaseline='bottom';
		oGc.fillText(str,(oC.width-w)/2,(oC.height-h)/2+h);  

		//填充文字居中显示  //在chrome下只有这样才是居中

		// oGc.textBaseline='top';
		// oGc.fillText(str,(oC.width-w)/2,(oC.height-60)/2+);//在火狐下正常 在chrome下 有问题
	</script>