canvas 繪製文字詳解

admin發表於2018-08-10
Canvas

canvas提供了書寫文字的方法和屬性。

具有兩個繪製文字的方法，fillText()和strokeText()，從名稱可以看出，分別繪製實心文字和鏤空文字。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin: 50px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext('2d');
  ctx.font = "40px Georgia";
  ctx.fillText("螞蟻部落", 50, 50);
  ctx.strokeText("螞蟻部落", 250, 50);
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="200"></canvas>
</body>
</html>

這兩個方法都接受兩個引數，第一個引數規定要繪製的文字內容，第二個引數規定開始繪製的座標。

特別說明:這個兩個方法都會產生路徑，文字會直接被繪製出來。

在實際應用中，我們通常需要對文字進行一些修飾，下面就分別做一下介紹。

一.文字上色:

使用下面兩個屬性即可實現:

[JavaScript] 純文字檢視 複製程式碼
ctx.fillStyle="red";
ctx.strokeStyle="blue";

關於這兩個屬性的具體用法可以參閱以下兩篇文章:

（1）.fillStyle屬性可以參閱canvas fillStyle一章節。

（2）.strokeStyle屬性可以參閱canvas strokeText()一章節。

二.font字型設定:

字型設定相對較為複雜一些，因為各個屬性的順序是有規則的，否則設定不會生效。

語言之間都是想通，font的設定遵循css語法:

[CSS] 純文字檢視 複製程式碼
[[<‘font-style’> || <‘font-variant’> || <‘font-weight’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’>] 
| caption | icon | menu | message-box | small-caption | status-bar

先解釋一下語法結構中一些符號的作用:

（1）.[]表示一個分組，其中的屬性使用具有一些共同的特點，或者對整個分組有一些語法規範。

（2）.||表示屬性是可選，可以同時存在，且相互位置不限。

（3）.?表示一個屬性或者一個分組中的內容是可有可無的。

（4）.|表示前後屬性或者前後分組中的屬性不能共存。

特別說明:canvas中並沒有設定line-height的功能，即便設定了也不會生效。

於是，由上面的語法結構我們可以得出font屬性設定如下規則:

先不考慮caption | icon | menu | message-box | small-caption | status-bar屬性。

（1）.font-size和font-family不能夠省略，且位置不能夠互換:

[JavaScript] 純文字檢視 複製程式碼
//正確
ctx.font = "40px Georgia";
//錯誤
ctx.font = "Georgia 40px";

（2）.font-style 、font-variant和font-weight它們之間的相互順序可以互換，但是必須位於font-size和font-family前面:

[JavaScript] 純文字檢視 複製程式碼
//正確
ctx.font = "italic 700 30px Arial";
//錯誤
ctx.font = "italic 30px Arial 700";

下面再來涉及caption | icon | menu | message-box | small-caption | status-bar這幾個屬性。

理論上，這幾個屬性和font-style、font-variant、font-weight、font-size、line-height和font-family不能共存，這由語法結構中|就可以得出，但是如下設定也是生效的:

[JavaScript] 純文字檢視 複製程式碼
ctx.font = "italic 700 30px Arial menu";

然而menu效果不會生效，如果把menu放在開頭，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
ctx.font = "menu italic 700 30px Arial";

放在開頭則會導致整個設定失效。上面這個小的特例，我們完全沒必要在意，只要嚴格按照語法來寫程式碼就可以了。

二.文字對齊:

使用textAlign即可實現，與css也基本一致。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
context.textAlign=”center|end|left|right|start”;

非常的簡單，一張圖片就可以完全描述它的作用:

a:3:{s:3:\"pic\";s:43:\"portal/201808/10/003226y57f9elcd5t7j8q7.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章