佳木斯湛栽影视文化发展公司
主頁 > 知識(shí)庫 > HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)

HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)
熱門標(biāo)簽：科大訊飛語音識(shí)別系統(tǒng) 國美全國運(yùn)營中心 網(wǎng)站排名優(yōu)化 網(wǎng)站文章發(fā)布 團(tuán)購網(wǎng)站 太平洋壽險(xiǎn)電話營銷 企業(yè)做大做強(qiáng) 百度競價(jià)排名

水平對齊textAlign

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

其中各值及意義如下表。

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

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

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？！趕快換一個(gè)吧??！   
  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方框的底端。

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

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

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？！趕快換一個(gè)吧！！   
  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 值放置每個(gè)單詞   
  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)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266
    凭祥市| 漯河市| 中阳县| 定安县| 阳曲县| 故城县| 巴林左旗| 平顺县| 沙洋县| 华安县| 浦东新区| 基隆市| 上栗县| 迁西县| 泸州市| 宽甸| 通化市| 无棣县| 揭东县| 乌拉特中旗| 固原市| 水城县| 视频| 道真| 榆树市| 宝坻区| 阿合奇县| 布尔津县| 麦盖提县| 大竹县| 尉犁县| 汉源县| 克什克腾旗| 启东市| 建水县| 肥东县| 黄平县| 徐州市| 万年县| 远安县| 澄迈县|