您的位置:首页> HTML5教程> canvas API

canvas textBaseline 属性

2019-8-29 22:22| 作者: admin| 查看: 354| 评论: 0|来自: 蚂蚁部落

此属性可以设置或者返回文本的基线位置。

在CSS中存在基线的概念,canvas中同样存在。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/29/222301kvfehzhf6qxeppxq.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

语法结构:

[JavaScript] 纯文本查看 复制代码
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"

参数解析:

(1).alphabetic:默认,文本基线是普通的字母基线。

(2).top:文本基线是 em 方框的顶端。

(3).hanging:文本基线是悬挂基线。

(4).middle:文本基线是 em 方框的正中。

(5).ideographic:文本基线是表意基线。

(6).bottom:文本基线是 em 方框的底端。

关于em方框具体内容可以参阅em 方法是什么一章节。

浏览器兼容:

(1).IE9+浏览器支持此属性。

(2).谷歌浏览器支持此属性。

(4).谷歌浏览器支持此属性。

(5).火狐浏览器支持此属性。

(6).Opera浏览器支持此属性。

(7).Safari浏览器支持此属性。

特别说明:此属性在不同的浏览器上效果可能不同,特别是使用"hanging" 或 "ideographic"时。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload = () => {
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  
  ctx.strokeStyle="red";
  ctx.moveTo(5,100);
  ctx.lineTo(395,100);
  ctx.stroke();
  
  ctx.font="20px Arial"
  
  ctx.textBaseline="top"; 
  ctx.fillText("Top",5,100); 
  ctx.textBaseline="bottom"; 
  ctx.fillText("Bottom",50,100); 
  ctx.textBaseline="middle"; 
  ctx.fillText("Middle",120,100); 
  ctx.textBaseline="alphabetic"; 
  ctx.fillText("Alphabetic",190,100); 
  ctx.textBaseline="hanging"; 
  ctx.fillText("Hanging",290,100); 
}
</script>
</head>
<body>
<canvas id="myCanvas">当前浏览器不支持canvas标签</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/29/222401p6xk4e8868pp8fcf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码为绘制的文本设置不同的基线位置,可以看到表现区别很大。

关于fillText()方法可以参阅canvas fillText()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部