社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > HTML5 Canvas實作文字對齊的方法總結_html5教學技巧

HTML5 Canvas實作文字對齊的方法總結_html5教學技巧

WBOY
發布： 2016-05-16 15:51:59
原創
1793 人瀏覽過

水平對齊textAlign

JavaScript Code複製內容到剪貼簿
  1. context.textAlign="center|end|left|right|start";  

其中各數值及意義如下表。

值 描述
start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本左对齐，
right 文本右对齐。

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

JavaScript Code複製內容到剪貼簿
  1.   
  2. "zh">   
  3.   
  4.     "UTF-8">   
  5.     textAlign   
  6.        
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas">   
  11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.        
  
  •   
  •   
  •     window.onload = 函數(){   
  •         var canvas = document.getElementById(">        canvas.width = 800;   
  •         canvas.height = 600;   
  •         
    • var
  •  context = canvas.getContext("2d">         context.fillStyle = "#FFF";   
  • ;            context.fillRect(0,0,800,600);   
  •   
  •         
  • // 在位置 400 創建藍色線            context.tripStyle=
  • "藍色";            context.moveTo(400,100);   
  •         context.lineTo(400,500);   
  •         context.lines();   
  •   
  •   
  •         context.fillStyle = 
  • "#000";    ;   
  •         context.font="50px Arial";   
  •   
  •         //顯示不同的文字對齊值   
  •         context.textAlign="開始";   
  •         context.fillText("textAlign=start", 400, 120);   
    •         context.textAlign="結束";   
  •         context.fillText("textAlign=end", 400, 200);   , 400, 200);   
  •         context.textAlign="左";   
  •         context.fillText("textAlign=left", 400, 280)  
    •         context.textAlign=
  • "中心";   
    •         context.fillText(
  • "textAlign=center", 400, 360);   
    •         context.textAlign=
  • "右";   
    •         context.fillText(
  • "textAlign=right", 400, 480);   
  •     }；   
  • 腳本>   
    • 相關標籤：
    canvas html5 文字
    來源：php.cn
    上一篇：HTML5仿手機微信聊天介面_html5教學技巧 下一篇：使用HTML5 Canvas API中的clip()方法裁剪區域圖像_html5教程技巧
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章
    最新問題
    如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
    來自於 2024-04-06 15:33:12
    0
    1
    433
    PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
    來自於 2024-04-05 12:57:00
    0
    1
    456
    HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
    來自於 2024-04-02 11:47:56
    0
    1
    275
    使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
    來自於 2024-04-01 20:42:38
    0
    1
    259
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板