首頁 > web前端 > H5教程 > 主體

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

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

水平對齊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);   
  •     };   
  • 腳本>   
  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門推薦
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板