第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

水車_ · 更新于 2021-02-23

文本垂直對(duì)齊方式

1. 前言

我們前面講的 canvas 只能繪制單行文本，單行文本怎么會(huì)有垂直對(duì)齊呢？其實(shí)，這里的垂直對(duì)齊是指文本基線與單行文本的對(duì)齊，類似 CSS 中的 vertical-align概念，本小節(jié)我們就來(lái)學(xué)習(xí)一下文本的垂直對(duì)齊。

2. 垂直對(duì)齊

canvas 為我們提供了一個(gè)文字基線與文本的垂直關(guān)系設(shè)置的屬性 textBaseline，這里的基線設(shè)置和 CSS 的 vertical-align 概念很類似，也可以想象成我們學(xué)習(xí)拼音時(shí)使用的四線三格圖。在電腦和手機(jī)上，每個(gè)漢字或者字符在設(shè)計(jì)的時(shí)候都有自己的排版方式。

例如這樣：

在 canvas 中，使用了六線五格的設(shè)定，所有的文字都被限制在了“六線五格”里面，這里字母 f 除外，f 在 canvas 繪制文本中屬于一個(gè)例外。

我們把這六條線從上到下命名為：

top
hanging
middle
alphabetic
ideographic
bottom

明白了上面的，我們就來(lái)看 canvas 是怎么設(shè)置基線的。

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網(wǎng)Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=400;
		canvas.height=240;
		const ctx = canvas.getContext('2d');
		
		ctx.fillStyle="#456795";
		ctx.font="20px 微軟雅黑";
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,20);
		ctx.lineTo(380,20);
		ctx.stroke();
		ctx.textBaseline="top"  //設(shè)置基線在文本頂部，文本和基線重合
		ctx.fillText("慕課Wiki textBaseline = top", 20,20)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,60);
		ctx.lineTo(380,60);
		ctx.stroke();
		ctx.textBaseline="hanging" //設(shè)置文本懸掛在基線上，文本和基線沒(méi)有重合
		ctx.fillText("慕課Wiki textBaseline = hanging", 20,60)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,100);
		ctx.lineTo(380,100);
		ctx.stroke();
		ctx.textBaseline="middle" //設(shè)置基線在文本中間
		ctx.fillText("慕課Wiki textBaseline = middle", 20,100)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,140);
		ctx.lineTo(380,140);
		ctx.stroke();
		ctx.textBaseline="alphabetic" //標(biāo)準(zhǔn)的字母基線
		ctx.fillText("慕課Wiki textBaseline = alphabetic", 20,140)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,180);
		ctx.lineTo(380,180);
		ctx.stroke();
		ctx.textBaseline="ideographic" 
		ctx.fillText("慕課Wiki textBaseline = ideographic", 20,180)
		
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(20,220);
		ctx.lineTo(380,220);
		ctx.stroke();
		ctx.textBaseline="bottom" 
		ctx.fillText("慕課Wiki textBaseline = bottom", 20,220)
	
	</script>
<body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

這樣我們就繪制了一個(gè)文本的垂直對(duì)齊。

3. 屬性整理

本小節(jié)我們學(xué)習(xí)了 textBaseline 屬性 , 它們是 canvas 2D API 提供的設(shè)置文本基線和文本垂直對(duì)其方式的屬性。

3.1 對(duì)齊設(shè)置 textBaseline

textBaseline 說(shuō)明

  • textBaseline 是 canvas 2D API 提供的設(shè)置文本基線和文本垂直對(duì)其方式的屬性。
  • 默認(rèn)值: bottom。

語(yǔ)法：

ctx.textBaseline = value;

取值說(shuō)明：

value 說(shuō)明 特別說(shuō)明
top 文本基線在文本塊的頂部。
hanging 文本基線是懸掛基線。
middle 文本基線在文本塊的中間。
alphabetic 文本基線是標(biāo)準(zhǔn)的字母基線。
ideographic 文字基線是表意字基線。 如果字符本身超出了 alphabetic 基線，那么 ideograhpic 基線位置在字符本身的底部。
bottom 文本基線在文本塊的底部。 與 ideographic 基線的區(qū)別在于 ideographic 基線不需要考慮下行字母。

4. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了利用 textBaseline 設(shè)定文本垂直對(duì)齊方式。