婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > HTML5 Canvas實現文本對齊的方法總結

HTML5 Canvas實現文本對齊的方法總結
熱門標簽：鶴壁手機自動外呼系統怎么安裝 中紳電銷智能機器人 農村住宅地圖標注 ai電銷機器人連接網關 威海營銷外呼系統招商 鄭州電銷外呼系統違法嗎 跟電銷機器人做同事 漳州人工外呼系統排名 濟南辦理400電話

水平對齊textAlign

JavaScript Code復制內容到剪貼板
  1. context.textAlign="center|end|left|right|start";  

其中各值及意義如下表。

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

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

JavaScript Code復制內容到剪貼板
  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 創建藍線   
  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>  

運行結果：

垂直對齊textBaseline

JavaScript Code復制內容到剪貼板
  1. context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";  

其中各值及意義如下表。

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

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

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

JavaScript Code復制內容到剪貼板
  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 繪制藍色線條   
  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>  

運行結果：

標簽：營口 蘇州 紅河 咸陽 文山 甘南 萍鄉 惠州

巨人網絡通訊聲明：本文標題《HTML5 Canvas實現文本對齊的方法總結》，本文關鍵詞  HTML5,Canvas,實現,文本,對齊,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《HTML5 Canvas實現文本對齊的方法總結》相關的同類信息！
  • 本頁收集關于HTML5 Canvas實現文本對齊的方法總結的相關信息資訊供網民參考！
    • 推薦文章
    婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av
    国产精品美女www爽爽爽| 欧美丰满少妇xxxxx高潮对白| 欧美一区三区二区| 国产一区三区三区| 成人三级伦理片| 国内精品久久久久影院一蜜桃| 丝瓜av网站精品一区二区| 亚洲成人动漫av| 制服丝袜在线91| 五月婷婷色综合| 欧美日韩一区二区三区不卡| 国产午夜亚洲精品理论片色戒| 亚洲高清中文字幕| 一本大道久久精品懂色aⅴ| 国产精品人成在线观看免费| 成人黄色网址在线观看| 国产精品久久久久久久久果冻传媒 | 亚洲综合小说图片| 在线中文字幕不卡| 亚洲狼人国产精品| 精品视频一区三区九区| 综合色天天鬼久久鬼色| 国精产品一区一区三区mba桃花| 99在线热播精品免费| 成人综合激情网| 国内外精品视频| 九九视频精品免费| av综合在线播放| jvid福利写真一区二区三区| 日本乱人伦aⅴ精品| 日韩电影在线看| 久久久不卡影院| 久久这里只有精品视频网| 国产盗摄精品一区二区三区在线| 大陆成人av片| 亚洲乱码中文字幕| 3d动漫精品啪啪| 韩国av一区二区| 久久久久久免费| 香蕉久久一区二区不卡无毒影院| 精品一区二区免费在线观看| 91啪亚洲精品| 日韩一区二区中文字幕| 国产亚洲自拍一区| 午夜欧美在线一二页| 国产精品一二三四区| 欧美日韩一区中文字幕| 91在线视频免费91| 久久99国内精品| 成人小视频免费观看| 天天影视涩香欲综合网| 日韩视频免费直播| 99re66热这里只有精品3直播| 亚洲成国产人片在线观看| 精品第一国产综合精品aⅴ| 国产精品资源网站| 国产日韩欧美制服另类| 日韩av一区二区在线影视| 91女厕偷拍女厕偷拍高清| 国产精品免费视频一区| 久久99精品久久久久久动态图| 一区二区国产视频| 天天综合天天综合色| 国产欧美日韩视频一区二区 | 国产精品网站在线观看| 91麻豆精品国产91久久久久 | 亚洲视频1区2区| www.欧美日韩国产在线| 国产精品久久久久久久久免费桃花 | 亚洲男人的天堂在线观看| 精品一区二区三区在线观看国产| 91麻豆精品91久久久久同性| 性感美女极品91精品| 欧美午夜不卡视频| 亚洲欧美中日韩| 91麻豆精品一区二区三区| 中文字幕免费一区| 97se狠狠狠综合亚洲狠狠| 亚洲色图欧洲色图| 欧美性大战久久| 美洲天堂一区二卡三卡四卡视频| 精品国产免费视频| 99久久精品久久久久久清纯| 亚洲成人手机在线| 2021中文字幕一区亚洲| 色久综合一二码| 久久99久国产精品黄毛片色诱| 欧美国产精品一区二区| 在线观看日韩电影| 福利一区福利二区| 日本在线不卡视频| 一区二区三区加勒比av| 国产视频一区二区在线观看| 91日韩精品一区| 国产在线视视频有精品| 日韩1区2区日韩1区2区| 依依成人精品视频| 国产精品丝袜一区| 日韩欧美成人一区| 欧美一区二区私人影院日本| 成人福利视频在线| 国产在线不卡一区| 亚洲高清在线视频| 亚洲高清不卡在线| 亚洲影院免费观看| 一区二区三区四区不卡视频| 国产精品日产欧美久久久久| 337p粉嫩大胆噜噜噜噜噜91av | 国产成人免费在线| 日本欧洲一区二区| 日韩在线a电影| 精品一区二区三区av| 蜜桃视频在线一区| 国精产品一区一区三区mba视频| 精品一区免费av| 欧美三级乱人伦电影| 日韩一区和二区| 精品国产成人系列| 日本一区二区三级电影在线观看| 91精品国产综合久久婷婷香蕉| 精品视频一区 二区 三区| 欧美日本国产一区| 精品国产乱码久久久久久1区2区 | 欧美剧情片在线观看| 欧美大片日本大片免费观看| 精品福利二区三区| 91精品国产综合久久小美女| 国产精品一区二区三区99| 国产精品一二一区| 成人不卡免费av| 91精品婷婷国产综合久久| 欧美精彩视频一区二区三区| 亚洲免费伊人电影| 精品一区二区三区香蕉蜜桃 | 中文字幕欧美日韩一区| 亚洲人午夜精品天堂一二香蕉| 亚洲黄色片在线观看| 五月激情综合婷婷| 国产成人免费在线观看| 日韩欧美中文字幕公布| 亚洲天堂av老司机| 精品伊人久久久久7777人| 欧美人动与zoxxxx乱| 一片黄亚洲嫩模| av中文一区二区三区| 日韩三级免费观看| 亚洲一区在线免费观看| 成人在线视频首页| 国产日韩欧美亚洲| 成人精品一区二区三区中文字幕 | 欧美大尺度电影在线| 七七婷婷婷婷精品国产| 欧美日韩国产一二三| 亚洲青青青在线视频| 99久久精品99国产精品| 中文字幕一区日韩精品欧美| 国产乱码字幕精品高清av | 成人激情视频网站| 国产欧美综合在线| 国产 日韩 欧美大片| 国产精品美女久久久久久久网站| 麻豆91精品91久久久的内涵| 欧美变态tickle挠乳网站| 国产婷婷一区二区| 91精品国产综合久久蜜臀| 精品区一区二区| 亚洲一区二区三区四区在线观看 | 欧美电影影音先锋| 一区二区三区日韩| 91成人在线观看喷潮| 亚洲天堂成人在线观看| 成人综合在线观看| 亚洲欧洲色图综合| 色婷婷综合久久久中文字幕| 亚洲桃色在线一区| 欧美在线综合视频| 视频一区欧美精品| 欧美不卡激情三级在线观看| 免费欧美在线视频| 国产亚洲va综合人人澡精品| 国产福利一区二区三区视频| 国产欧美精品一区| caoporm超碰国产精品| 亚洲猫色日本管| 欧美日本一区二区在线观看| 美脚の诱脚舐め脚责91| 精品国产露脸精彩对白| 国产精品性做久久久久久| 国产欧美一区二区精品秋霞影院| 国产一区二区三区精品视频| 国产欧美精品一区aⅴ影院| 精品一区二区影视| 国产精品乱人伦中文| 成人免费三级在线| 亚洲永久免费视频| 欧美一卡2卡3卡4卡| 717成人午夜免费福利电影| 蜜桃av一区二区在线观看| 国产女同互慰高潮91漫画| 色偷偷成人一区二区三区91|