Canvas 文字水平对齐 textAlign

大家有没有发现,每次文本水平方向的绘制开始的位置都是我们设置的绘制点

如果加上绘制方向 direction,那么绘制的结果就有两种

比如下面这个范例,从原点 (50,50) 开始绘制 22px Microsoft YaHei 的文本

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="500" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.moveTo(250,0);
ctx.lineTo(250,200);
ctx.strokeStyle="red";
ctx.stroke();
ctx.font = "22px Microsoft YaHei"
ctx.fillText("简单教程,简单编程",250,50);
ctx.direction = "rtl"
ctx.fillText("简单教程,简单编程",250,75);
</script>

运行结果如下


因为某些浏览器不支持 direction 属性,所以我们截图如下

但有时候我们想居中绘制,或者左对齐基准线,或者右对齐基准线,比如下图这样

有没有办法呢?

答案是有的

但文本的水平对齐方式内容远远超过了上面这张图,而且还涉及到绘制点的关系与绘制方向,先看下图

  1. 居中对齐(center),左对齐(left),右对齐(right) 对于不同的绘制方向是没影响的,该怎么样还是怎么样

  2. 但是 startend 对齐对于不同的绘制方向是不同的

    • 如果 direction 属性设置为 ltr ,则 leftstart 的效果相同,rightend 的效果相同

    • 如果 direction 属性设置为 rtl ,则 leftend 的效果相同,rightstart 的效果相同

  3. 居中对齐(center) 是基于在调用 fillText() 的时候所给的 x 的值,也就是说文本一半在 x 的左边,一半在 x 的右边

    如果想让文本在整个 canvas 居中,就需要将 fillText() 的 x 值设置成 canvas 的宽度的一半

与 HTML/CSS 中 textalign 的区别

Canvas 中水平的对齐方式和 HTML/CSS 中是不一样的

  1. HTML/CSS 中的 textAlign 对齐方式是相对于父容器的位置
  2. Canvas 中的水平对齐方式是相对于自己绘制点的位置

它们之间的换算也很简单,就是把 Canvas 当前绘制对象的容器起始点和大小的矩形区域描述出来,然后根据换算规则去换算就好了

比如说我们把文本绘制在起始点为 (50,50) ,宽高为 (400x100) 的容器里

  1. 如果是垂直居中左对齐,那么绘制点 (x,y) 就是

    x = 50
    y = 50 + 100/2 = 100
    
  2. 如果是垂直居中右对齐,那么绘制点就是

    x = 50 + 400     = 450
    y = 50 + 100/2   = 100
    
  3. 如果是垂直水平居中,那么绘制绘制点就是

    x = 50 + 400/2 = 250
    y = 50 + 100/2 = 100
    

是不是就能和图上对应开来了

Canvas textAlign 属性

Canvas 提供了属性 textAlign 用于设置文字的水平对齐方式,默认值是 start

语法

ctx.textAlign = "left";
ctx.textAlign = "right";
ctx.textAlign = "center";
ctx.textAlign = "start"
ctx.textAlign = "end";
说明
left 文本左对齐
right 文本右对齐
center 文本居中对齐
start 默认值,文本对齐界线开始的地方
end 文本对齐界线结束的地方

范例

下面的代码绘制了一个居中对齐的文本

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="500" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");

ctx.moveTo(250,0);
ctx.lineTo(250,200);
ctx.strokeStyle="red";
ctx.stroke();
ctx.textAlign="center";
ctx.font = "22px Microsoft YaHei"
ctx.fillText("简单教程,简单编程",250,50);
</script>

运行结果如下


范例 2

我们看看不同的绘制方向和不同的对齐方式对文本绘制点的影响

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-3" width="500" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-3");
var ctx = c.getContext("2d");
var textAlign = ['left','right','center','start','end']
var direction = ['ltr','rtl'];

ctx.strokeStyle = "red"
ctx.moveTo(250,0)
ctx.lineTo(250,800)
ctx.stroke();
ctx.font = "48px Microsoft YaHei"
ctx.fillStyle="black";
var k = 0;
for (var j = 0; j < direction.length;j++)
{
    ctx.direction = direction[j];
    console.log(ctx.direction);
    for ( var i = 0; i < textAlign.length;i++)
    {   k++;
        ctx.textAlign = textAlign[i];
        ctx.fillText("简单教程",250,60*k,500-250);
    }
    k+=1;
}
</script>

运行结果如下

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.