canvas textAlign 文本对齐

2018-11-3 09:48| 作者: admin| 查看: 1172| 评论: 0|来自: 蚂蚁部落

textAlign属性设置或者返回文本的对齐方式。

此属性仅对使用fillText或者strokeText方法绘制的文本有效。

对齐是以文本的开始绘制的x轴坐标为参考的。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.textAlign="center|end|left|right|start";

参数解析:

(1).start:默认值,文本以指定位置起始。

(2).end:文本以指定位置结束。

(3).center:整个字符串的中心位置被放置于指定位置。

(4).left:文本左对齐指定位置。

(5).right:文本右对齐指定位置。

上述阐述非常容易理解,关键点在于"指定位置"是哪个位置。

此位置就是fillText或者strokeText方法绘制文本开始位置的x轴坐标。

浏览器兼容:

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

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

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

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

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

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

代码实例如下:

[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=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  
  ctx.strokeStyle="red";
  ctx.moveTo(150,20);
  ctx.lineTo(150,170);
  ctx.stroke();
  
  ctx.font="15px Arial"; 
  
  ctx.textAlign="start"; 
  ctx.fillText("textAlign=start",150,60); 
  ctx.textAlign="end"; 
  ctx.fillText("textAlign=end",150,80); 
  ctx.textAlign="left"; 
  ctx.fillText("textAlign=left",150,100);
  ctx.textAlign="center"; 
  ctx.fillText("textAlign=center",150,120); 
  ctx.textAlign="right"; 
  ctx.fillText("textAlign=right",150,140);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094934tpsmi1991p1en8nb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).红色竖线的x轴坐标与fillText方法绘制文本的起始位置x轴坐标相同。

(2).所有的对齐方式都是以起始位置x轴坐标为参考的,也就是相当于以红色竖线为参考。

(3).start表示文本以x轴坐标作为起始位置绘制(默认)。

(4).end表示文本以x轴坐标作为结束位置绘制。

(5).left表示文本左侧对齐x轴坐标绘制。

(6).right表示文本右侧对齐x轴坐标绘制。

direction属性对对齐的实际绘制表现有所影响:

默认(ltr)文本由左到右排列,设置为"rtl"后,文本由右向左排列。

如果direction属性值为"ltr"(默认),那么:

(1).left等同于start。

(2).right等同于end。

如果direction属性值为"rtl"(默认),那么:

(1).left等同于end。

(2).right等同于start。

分析如下:

(1).文本从左向右绘制,起始位置自然是左侧,那么left等同于start。

(2).文本从右向左绘制,其实位置编程右侧,同样道理,right就等同于start。

特别说明:direction当前是一个实验性质属性,浏览器支持度非常低,不建议使用。


鲜花

握手

雷人

路过

鸡蛋
返回顶部