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

我的購物車

已加入門課程

購物車?yán)锟湛杖缫?/h3>
快去這里選購你中意的課程

實戰(zhàn)課

體系課

我的訂單中心

全部開發(fā)者教程

canvas 入門教程

入門

canvas 學(xué)習(xí)前提開始之前初識 canvas

基礎(chǔ)教程

繪制線段繪制折線繪制多條折線用線條繪制圖形繪制矩形路徑填充描邊填充單一顏色描邊填充漸變顏色線條屬性繪制圓繪制圓弧繪制橢圓繪制二次貝塞爾曲線繪制三次貝塞爾曲線繪制虛線（螞蟻線）陰影效果文本繪制空心文本繪制文本水平對齊方式文本垂直對齊方式計算文本寬度繪制狀態(tài)存儲

首頁慕課教程 canvas 入門教程文本水平對齊方式

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

上一節(jié)

空心文本繪制

文本垂直對齊方式

下一節(jié)

文本水平對齊方式

1. 前言

文本對齊方式針對的是我們前兩節(jié)講的繪制文本的方法，文本對齊方式分為水平對齊和垂直對齊兩種，本小節(jié)我們學(xué)習(xí)水平對齊方式的設(shè)定。

2. 水平對齊

我們前兩節(jié)在學(xué)習(xí)繪制文本的時候，都是設(shè)定了一行文字和一對坐標(biāo)點后開始繪制的，繪制的文本也是從我們給定的點開始。當(dāng)然，canvas 也是支持將我們給定的點作為單行文本的中點或者終點，這就要用到文本水平對齊屬性：textAlign了。

我們看一個例子：

實例演示

預(yù)覽復(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');
		const ctx = canvas.getContext('2d');
		
		ctx.font="20px 微軟雅黑"
		
		ctx.textAlign = "left" //設(shè)置繪制文本的給定點為文本左側(cè)
		ctx.fillText("慕課Wiki", 150, 30)
		
		
		ctx.textAlign = "center" //設(shè)置繪制文本的給定點為文本中間
		ctx.fillText("慕課Wiki", 150, 80)
		
		
		ctx.textAlign = "right" //設(shè)置繪制文本的給定點為文本右側(cè)
		ctx.fillText("慕課Wiki", 150, 130)
		
		//繪制中間參考線
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(150,0);
		ctx.lineTo(150,150);
		ctx.stroke();
	
	</script>
<body>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

我們將上面例子的主要內(nèi)容拆分講解：

設(shè)置字體大小以及字體樣式，font 屬性屬于全局屬性，設(shè)定一次，后面所有繪制都會受到影響。
```
ctx.font="20px 微軟雅黑"
```
設(shè)定水平對齊方式為左對齊，即以我們給定的錨點 (150, 30) 為文本起點，left 值也是默認(rèn)值。
```
ctx.textAlign = "left"
ctx.fillText("慕課Wiki", 150, 30)
```
設(shè)定水平對齊方式為居中對齊，即以我們給定的錨點 (150, 80) 為文本中點。
```
ctx.textAlign = "center"
ctx.fillText("慕課Wiki", 150, 80)
```
設(shè)定水平對齊方式為右對齊，即以我們給定的錨點 (150, 130) 為文本最右點。
```
ctx.textAlign = "right"
ctx.fillText("慕課Wiki", 150, 130)
```

繪制一條輔助參考線。

ctx.beginPath()
 ctx.strokeStyle="#ccc";
 ctx.moveTo(150,0);
 ctx.lineTo(150,150);
 ctx.stroke();

3.水平對齊進(jìn)階學(xué)習(xí)

上面我們列舉了 textAlign 的三個值，left，center，right，其實 textAlign 屬性還有兩個值：start 和 end，這兩個值在默認(rèn)情況下和 left、right 的作用完全一樣，即：start 等同于 left，end 等同于 right，那么問題來了，start 和 left 在什么情況下表現(xiàn)不相同呢？

要想回答上面的問題，我們需要先弄明白 瀏覽器的文本方向。

我們使用的瀏覽器默認(rèn)的文本方向都是從左向右的，即 ltr 模式，這和我們的閱讀習(xí)慣是相同的（ltr = left to right），但是瀏覽器還提供了一種閱讀方式，rtl 模式，就是從右向左的閱讀方向。

在瀏覽器 ltr 模式下，也就是正常模式下，start 的作用和 left 是相同的，end 的作用和 right 的作用是相同的。

如果瀏覽器設(shè)置了文本方向從右向左，即 rtl 模式，那么對齊方式剛好相反，start 的作用和 right 是相同的， end 的表現(xiàn)和 left 的表現(xiàn)是相同的。

canvas也為我們提供了修改畫布文本方向的屬性 direction，該屬性可以修改畫布的文本方向，該屬性主要影響 start 和 end 的表現(xiàn)。

direction 屬性還未被納入標(biāo)準(zhǔn)文檔，所以兼容性很差，平時不建議使用。

我們看一個案例，請使用最新 chrome 瀏覽器查看本案例。

實例演示

預(yù)覽復(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=300;
		canvas.height=300;
		const ctx = canvas.getContext('2d');
		
		
		ctx.fillStyle = "#456795"
		ctx.font="16px 微軟雅黑"
		ctx.textAlign = "left"
		ctx.fillText("慕課Wiki left", 150, 30)
		ctx.textAlign = "center"
		ctx.fillText("慕課Wiki center", 150, 60)
		ctx.textAlign = "right"
		ctx.fillText("慕課Wiki right", 150, 90)
		ctx.textAlign = "start"
		ctx.fillText("慕課Wiki start", 150, 120)
		ctx.textAlign = "end"
		ctx.fillText("慕課Wiki end", 150, 150)
		
	
		ctx.direction = "rtl";	 //設(shè)定畫布的渲染方向
		
		ctx.fillStyle = "red"
		ctx.font="16px 微軟雅黑"
		ctx.textAlign = "left"
		ctx.fillText("慕課Wiki left", 150, 180)
		ctx.textAlign = "center"
		ctx.fillText("慕課Wiki center", 150, 210)
		ctx.textAlign = "right"
		ctx.fillText("慕課Wiki right", 150, 240)
		ctx.textAlign = "start"
		ctx.fillText("慕課Wiki start", 150, 270)
		ctx.textAlign = "end"
		ctx.fillText("慕課Wiki end", 150, 300)
		
		//繪制中間參考線
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(150,0);
		ctx.lineTo(150,300);
		ctx.stroke();
		
		//繪制中間參考線
		ctx.beginPath()
		ctx.strokeStyle="#ccc";
		ctx.moveTo(0,150);
		ctx.lineTo(300,150);
		ctx.stroke();
	
	</script>
<body>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

我們可以從運行結(jié)果中看出，當(dāng)設(shè)定了畫布的文本方向為 rtl 后，再繪制的紅色文字，只有 start 和 end 的位置切換了，left、right、center都沒有受到影響。

4. 屬性整理

本小節(jié)我們學(xué)習(xí)了 textAlign 屬性和 direction 屬性 , 它們是 canvas 2D API 提供的設(shè)置文本對齊方式的屬性。

4.1 對齊設(shè)置 textAlign

textAlign 說明

textAlign 是 canvas 2D API 提供的設(shè)置文本對齊方式的屬性。
默認(rèn)值：start。

特別說明：
該屬性是針對 fillText 和 strokeText 方法的 X 的值，所以如果 textAlign = “center”，那么該文本將畫在 X - 50% * width 的位置。

語法：

ctx.textAlign = value;

取值說明：

value可取如下值：

value	說明	特別說明
left	文本左對齊	對齊方式是針對 `fillText` 和 `strokeText` 方法的 X 的值。
right	文本右對齊	對齊方式是針對 `fillText` 和 `strokeText` 方法的 X 的值。
center	文本居中對齊	對齊方式是針對 `fillText` 和 `strokeText` 方法的 X 的值。
start	文本對齊界線開始的地方，默認(rèn)左對齊	搭配 direction 屬性使用，ltr：從左向右，rtl：從右向左。
end	文本對齊界線結(jié)束的地方，默認(rèn)右對齊	搭配 direction 屬性使用，ltr：從左向右，rtl：從右向左。

補充

如果你想讓文本在整個 canvas 居中，只需要將 fillText 的 X 值設(shè)置成 canvas 的寬度的一半，textAlign 值設(shè)置成 center。
start 和 stop 默認(rèn)情況下是等同于 left 和 right 的，如果設(shè)置 direction 的值為：rtl，則剛好相反。
direction 屬性還未被納入標(biāo)準(zhǔn)文檔，兼容性很差，所以針對 start 和 end 的使用參照 left 和 right。

4.2 文本方向 direction

direction 說明

direction 是 canvas 2D API 提供的設(shè)置文本方向的屬性。
默認(rèn)值：ltr。

語法：

ctx.direction = value;

取值說明：

value可取如下值：

value	說明	特別說明
ltr	畫布文本從左向右排布	默認(rèn)值。
rtl	畫布文本從右向左排布	兼容性較差。

5. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了利用 textAlign 設(shè)定文本對齊方式以及 start 和 end 在文本方向不同時的表現(xiàn)，下一節(jié)我們學(xué)習(xí)文本的垂直對齊。

上一節(jié)

空心文本繪制

下一節(jié)

文本垂直對齊方式

我要提出意見反饋

索引目錄

文本水平對齊方式

2. 水平對齊

3.水平對齊進(jìn)階學(xué)習(xí)

4. 屬性整理

4.1 對齊設(shè)置 textAlign

4.2 文本方向 direction

5. 總結(jié)

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號