国产97人人超碰caoprom,国产精品青草久久久久福利99,九色中文视频

HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)

水平對齊textAlign

JavaScript Code復(fù)制內(nèi)容到剪貼板

context.textAlign="center|end|left|right|start";

其中各值及意義如下表。

值	描述
start	默認(rèn)。文本在指定的位置開始。
end	文本在指定的位置結(jié)束。
center	文本的中心被放置在指定的位置。
left	文本左對齊，
right	文本右對齊。

我們通過一個例子來直觀的感受一下。

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？！趕快換一個吧??！
</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é)果：

垂直對齊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方框的底端。

首先咱們通過一個圖來看一下各個基線代表的位置。

我們通過一個例子來直觀的感受一下。

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？！趕快換一個吧！！
</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 值放置每個單詞
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>

運(yùn)行結(jié)果：

標(biāo)簽：營口蘇州紅河咸陽文山甘南萍鄉(xiāng) 惠州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5 Canvas實(shí)現(xiàn)文本對齊的方法總結(jié)》，本文關(guān)鍵詞 HTML5,Canvas,實(shí)現(xiàn),文本,對齊,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。