HTML5 Canvas實作文字對齊的方法總結_html5教學技巧
水平對齊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
作者最新文章
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31