HTML5Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 15:05:26

HTML5Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)

HTML5Canvas實(shí)現(xiàn)文本對齊的方法總結(jié):這篇文章主要介紹了HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié),包括使用水平對齊的context.textAlign與垂直對齊的context.textBaseline兩種方式及各種參數(shù),需要的朋友可以參考下水平對齊textAlignJavaScript Code復(fù)制內(nèi)容到剪貼板context.te

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀HTML5Canvas實(shí)現(xiàn)文本對齊的方法總結(jié):這篇文章主要介紹了HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié),包括使用水平對齊的context.textAlign與垂直對齊的context.textBaseline兩種方式及各種參數(shù),需要的朋友可以參考下水平對齊textAlignJavaScript Code復(fù)制內(nèi)容到剪貼板context.te

這篇文章主要介紹了HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié),包括使用水平對齊的context.textAlign與垂直對齊的context.textBaseline兩種方式及各種參數(shù),需要的朋友可以參考下

水平對齊textAlign

JavaScript Code復(fù)制內(nèi)容到剪貼板

context.textAlign="center|end|left|right|start";

其中各值及意義如下表。

<!DOCTYPE html> 
<html lang="zh"> 
<head> 
 <meta charset="UTF-8"> 
 <title>textAlign</title> 
 <style> 
 body { background: url("./images/bg3.jpg") repeat; } 
 #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } 
 </style> 
</head> 
<body> 
<p id="canvas-warp"> 
 <canvas id="canvas"> 
 你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！ 
 </canvas> 
</p> 
 
<script> 
 window.onload = function(){ 
 var canvas = document.getElementById("canvas"); 
 canvas.width = 800; 
 canvas.height = 600; 
 var context = canvas.getContext("2d"); 
 context.fillStyle = "#FFF"; 
 context.fillRect(0,0,800,600); 
 
 // 在位置 400 創(chuàng)建藍(lán)線 
 context.strokeStyle="blue"; 
 context.moveTo(400,100); 
 context.lineTo(400,500); 
 context.stroke(); 
 
 
 context.fillStyle = "#000"; 
 context.font="50px Arial"; 
 
 // 顯示不同的 textAlign 值 
 context.textAlign="start"; 
 context.fillText("textAlign=start", 400, 120); 
 context.textAlign="end"; 
 context.fillText("textAlign=end", 400, 200); 
 context.textAlign="left"; 
 context.fillText("textAlign=left", 400, 280); 
 context.textAlign="center"; 
 context.fillText("textAlign=center", 400, 360); 
 context.textAlign="right"; 
 context.fillText("textAlign=right", 400, 480); 
 }; 
</script> 
</body> 
</html>

值	描述
start	默認(rèn)。文本在指定的位置開始。
end	文本在指定的位置結(jié)束。
center	文本的中心被放置在指定的位置。
left	文本左對齊，
right	文本右對齊。

我們通過一個(gè)例子來直觀的感受一下。

JavaScript Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html> 
<html lang="zh"> 
<head> 
 <meta charset="UTF-8"> 
 <title>textBaseline</title> 
 <style> 
 body { background: url("./images/bg3.jpg") repeat; } 
 #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } 
 </style> 
</head> 
<body> 
<div id="canvas-warp"> 
 <canvas id="canvas"> 
 你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！ 
 </canvas> 
</div> 
 
<script> 
 window.onload = function(){ 
 var canvas = document.getElementById("canvas"); 
 canvas.width = 800; 
 canvas.height = 600; 
 var context = canvas.getContext("2d"); 
 context.fillStyle = "#FFF"; 
 context.fillRect(0,0,800,600); 
 
 //在位置 y=300 繪制藍(lán)色線條 
 context.strokeStyle="blue"; 
 context.moveTo(0,300); 
 context.lineTo(800,300); 
 context.stroke(); 
 
 context.fillStyle = "#00AAAA"; 
 context.font="20px Arial"; 
 
 //在 y=300 以不同的 textBaseline 值放置每個(gè)單詞 
 context.textBaseline="top"; 
 context.fillText("Top",150,300); 
 context.textBaseline="bottom"; 
 context.fillText("Bottom",250,300); 
 context.textBaseline="middle"; 
 context.fillText("Middle",350,300); 
 context.textBaseline="alphabetic"; 
 context.fillText("Alphabetic",450,300); 
 context.textBaseline="hanging"; 
 context.fillText("Hanging",550,300); 
 }; 
</script> 
</body> 
</html>

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

2016324114332033.jpg (850×500)

垂直對齊textBaseline

JavaScript Code復(fù)制內(nèi)容到剪貼板

context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

其中各值及意義如下表。

值	描述
alphabetic	默認(rèn)。文本基線是普通的字母基線。
top	文本基線是em方框的頂端。
hanging	文本基線是懸掛基線。
middle	文本基線是em方框的正中。
ideographic	文本基線是表意基線。
bottom	文本基線是em方框的底端。

首先咱們通過一個(gè)圖來看一下各個(gè)基線代表的位置。
2016324114358024.gif (600×268)

我們通過一個(gè)例子來直觀的感受一下。

JavaScript Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html> 
<html lang="zh"> 
<head> 
 <meta charset="UTF-8"> 
 <title>textBaseline</title> 
 <style> 
 body { background: url("./images/bg3.jpg") repeat; } 
 #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } 
 </style> 
</head> 
<body> 
<p id="canvas-warp"> 
 <canvas id="canvas"> 
 你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！ 
 </canvas> 
</p> 
 
<script> 
 window.onload = function(){ 
 var canvas = document.getElementById("canvas"); 
 canvas.width = 800; 
 canvas.height = 600; 
 var context = canvas.getContext("2d"); 
 context.fillStyle = "#FFF"; 
 context.fillRect(0,0,800,600); 
 
 //在位置 y=300 繪制藍(lán)色線條 
 context.strokeStyle="blue"; 
 context.moveTo(0,300); 
 context.lineTo(800,300); 
 context.stroke(); 
 
 context.fillStyle = "#00AAAA"; 
 context.font="20px Arial"; 
 
 //在 y=300 以不同的 textBaseline 值放置每個(gè)單詞 
 context.textBaseline="top"; 
 context.fillText("Top",150,300); 
 context.textBaseline="bottom"; 
 context.fillText("Bottom",250,300); 
 context.textBaseline="middle"; 
 context.fillText("Middle",350,300); 
 context.textBaseline="alphabetic"; 
 context.fillText("Alphabetic",450,300); 
 context.textBaseline="hanging"; 
 context.fillText("Hanging",550,300); 
 }; 
</script> 
</body> 
</html>

運(yùn)行結(jié)果：
2016324114419550.jpg (850×500)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML5Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： html5 對齊方式文本對齊

熱門焦點(diǎn)

HTML5Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)

HTML5Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)

HTML5Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)

最新推薦

猜你喜歡

熱門推薦