HTML5 Canvas實作文字對齊的方法總結_html5教學技巧
May 16, 2016 pm 03:51 PM
canvas
html5
文字
水平對齊textAlign
JavaScript Code複製內容到剪貼簿
- context.textAlign="center|end|left|right|start";
其中各數值及意義如下表。
| 值 | 描述 |
|---|---|
| start | 默认。文本在指定的位置开始。 |
| end | 文本在指定的位置结束。 |
| center | 文本的中心被放置在指定的位置。 |
| left | 文本左对齐， |
| right | 文本右对齐。 |
我們透過一個例子來直觀的感受一下。
JavaScript Code複製內容到剪貼簿
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>textAlign</title>
- <style>
- body { background: url("./images/bg3.jpg") repeat; }
- #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
- </style>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas">
- 你的浏览器居然不支持Canvas？！赶快换一个吧！！
- </canvas>
- </div>
- 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
熱門文章
擊敗分裂小說需要多長時間？
3 週前
By DDD
倉庫：如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前
By 王林
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱門文章
擊敗分裂小說需要多長時間？
3 週前
By DDD
倉庫：如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前
By 王林
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
