HTML5 Canvas實作文字對齊的方法總結_html5教學技巧
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 15:51:59
水平對齊textAlign
JavaScript Code複製內容到剪貼簿
-
context.textAlign="center|end|left|right|start";
其中各數值及意義如下表。
值 |
描述 |
start |
默认。文本在指定的位置开始。 |
end |
文本在指定的位置结束。 |
center |
文本的中心被放置在指定的位置。 |
left |
文本左对齐, |
right |
文本右对齐。 |
我們透過一個例子來直觀的感受一下。
JavaScript Code複製內容到剪貼簿
-
-
"zh">
-
-
"UTF-8">
-
textAlign
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas?!赶快换一个吧!!
-
-
-
-
-
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);
- };
- 腳本>
-
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
-
2025-02-26 03:58:14
-
2025-02-26 03:38:10
-
2025-02-26 03:17:10
-
2025-02-26 02:49:09
-
2025-02-26 01:08:13
-
2025-02-26 00:46:10
-
2025-02-25 23:42:08
-
2025-02-25 22:50:13
-
2025-02-25 21:54:11
-
2025-02-25 20:45:11