您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)怎么在HTML5中使用Canvas對(duì)齊文本,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
水平對(duì)齊textAlign
JavaScript Code復(fù)制內(nèi)容到剪貼板
context.textAlign="center|end|left|right|start";
其中各值及意義如下表。
值 | 描述 |
---|---|
start | 默認(rèn)。文本在指定的位置開(kāi)始。 |
end | 文本在指定的位置結(jié)束。 |
center | 文本的中心被放置在指定的位置。 |
left | 文本左對(duì)齊, |
right | 文本右對(duì)齊。 |
我們通過(guò)一個(gè)例子來(lái)直觀的感受一下。
JavaScript Code復(fù)制內(nèi)容到剪貼板
<!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?!趕快換一個(gè)吧!!
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
// 在位置 400 創(chuàng)建藍(lán)線
context.strokeStyle="blue";
context.moveTo(400,100);
context.lineTo(400,500);
context.stroke();
context.fillStyle = "#000";
context.font="50px Arial";
// 顯示不同的 textAlign 值
context.textAlign="start";
context.fillText("textAlign=start", 400, 120);
context.textAlign="end";
context.fillText("textAlign=end", 400, 200);
context.textAlign="left";
context.fillText("textAlign=left", 400, 280);
context.textAlign="center";
context.fillText("textAlign=center", 400, 360);
context.textAlign="right";
context.fillText("textAlign=right", 400, 480);
};
</script>
</body>
</html>
運(yùn)行結(jié)果:
垂直對(duì)齊textBaseline
JavaScript Code復(fù)制內(nèi)容到剪貼板
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
其中各值及意義如下表。
值 | 描述 |
---|---|
alphabetic | 默認(rèn)。文本基線是普通的字母基線。 |
top | 文本基線是em方框的頂端。 |
hanging | 文本基線是懸掛基線。 |
middle | 文本基線是em方框的正中。 |
ideographic | 文本基線是表意基線。 |
bottom | 文本基線是em方框的底端。 |
首先咱們通過(guò)一個(gè)圖來(lái)看一下各個(gè)基線代表的位置。
我們通過(guò)一個(gè)例子來(lái)直觀的感受一下。
JavaScript Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>textBaseline</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?!趕快換一個(gè)吧!! </canvas> </div> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.fillStyle = "#FFF"; context.fillRect(0,0,800,600); //在位置 y=300 繪制藍(lán)色線條 context.strokeStyle="blue"; context.moveTo(0,300); context.lineTo(800,300); context.stroke(); context.fillStyle = "#00AAAA"; context.font="20px Arial"; //在 y=300 以不同的 textBaseline 值放置每個(gè)單詞 context.textBaseline="top"; context.fillText("Top",150,300); context.textBaseline="bottom"; context.fillText("Bottom",250,300); context.textBaseline="middle"; context.fillText("Middle",350,300); context.textBaseline="alphabetic"; context.fillText("Alphabetic",450,300); context.textBaseline="hanging"; context.fillText("Hanging",550,300); }; </script> </body> </html>
以上就是怎么在HTML5中使用Canvas對(duì)齊文本,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。