主頁 > 知識庫 > HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)

HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)
熱門標(biāo)簽：鶴壁手機(jī)自動外呼系統(tǒng)怎么安裝 中紳電銷智能機(jī)器人 農(nóng)村住宅地圖標(biāo)注 ai電銷機(jī)器人連接網(wǎng)關(guān) 威海營銷外呼系統(tǒng)招商 鄭州電銷外呼系統(tǒng)違法嗎 跟電銷機(jī)器人做同事 漳州人工外呼系統(tǒng)排名 濟(jì)南辦理400電話

水平對齊textAlign

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. context.textAlign="center|end|left|right|start";  

其中各值及意義如下表。

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

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

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>textAlign</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的瀏覽器居然不支持Canvas？！趕快換一個吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         // 在位置 400 創(chuàng)建藍(lán)線   
  28.         context.strokeStyle="blue";   
  29.         context.moveTo(400,100);   
  30.         context.lineTo(400,500);   
  31.         context.stroke();   
  32.   
  33.   
  34.         context.fillStyle = "#000";   
  35.         context.font="50px Arial";   
  36.   
  37.         // 顯示不同的 textAlign 值   
  38.         context.textAlign="start";   
  39.         context.fillText("textAlign=start", 400, 120);   
  40.         context.textAlign="end";   
  41.         context.fillText("textAlign=end", 400, 200);   
  42.         context.textAlign="left";   
  43.         context.fillText("textAlign=left", 400, 280);   
  44.         context.textAlign="center";   
  45.         context.fillText("textAlign=center", 400, 360);   
  46.         context.textAlign="right";   
  47.         context.fillText("textAlign=right", 400, 480);   
  48.     };   
  49. </script>   
  50. </body>   
  51. </html>  

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

垂直對齊textBaseline

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";  

其中各值及意義如下表。

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

首先咱們通過一個圖來看一下各個基線代表的位置。

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

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>textBaseline</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的瀏覽器居然不支持Canvas？！趕快換一個吧?。?  
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         //在位置 y=300 繪制藍(lán)色線條   
  28.         context.strokeStyle="blue";   
  29.         context.moveTo(0,300);   
  30.         context.lineTo(800,300);   
  31.         context.stroke();   
  32.   
  33.         context.fillStyle = "#00AAAA";   
  34.         context.font="20px Arial";   
  35.   
  36.         //在 y=300 以不同的 textBaseline 值放置每個單詞   
  37.         context.textBaseline="top";   
  38.         context.fillText("Top",150,300);   
  39.         context.textBaseline="bottom";   
  40.         context.fillText("Bottom",250,300);   
  41.         context.textBaseline="middle";   
  42.         context.fillText("Middle",350,300);   
  43.         context.textBaseline="alphabetic";   
  44.         context.fillText("Alphabetic",450,300);   
  45.         context.textBaseline="hanging";   
  46.         context.fillText("Hanging",550,300);   
  47.     };   
  48. </script>   
  49. </body>   
  50. </html>  

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

標(biāo)簽：營口 蘇州 紅河 咸陽 文山 甘南 萍鄉(xiāng) 惠州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)》，本文關(guān)鍵詞  HTML5,Canvas,實(shí)現(xiàn),文本,對齊,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)》相關(guān)的同類信息！
  • 本頁收集關(guān)于HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章