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”;
非常的簡單,一張圖片就可以完全描述它的作用:
相關文章
- canvas 繪製文字詳解Canvas
- canvas 按住滑鼠拖動 繪製文字Canvas
- html5 canvas學習--繪製文字HTMLCanvas
- canvas核心技術-如何繪製圖片和文字Canvas
- canvas 繪製矩形Canvas
- canvas 繪製扇形Canvas
- 小程式利用Canvas繪製圖片和豎排文字Canvas
- canvas 繪製線條Canvas
- canvas 繪製圓形Canvas
- canvas繪製流星效果Canvas
- canvas繪製直線Canvas
- Canvas 繪製雷達圖Canvas
- canvas繪製動畫的技巧Canvas動畫
- canvas 繪製立體圓環Canvas
- canvas 繪製圓角矩形Canvas
- canvas 繪製矩形缺角Canvas
- canvas 繪製雙線技巧Canvas
- canvas繪製風車效果Canvas
- canvas繪製笑臉表情Canvas
- canvas繪製太陽系Canvas
- canvas繪製矩形框Canvas
- Canvas 繪製風向動畫Canvas動畫
- SVG <text>繪製文字SVG
- canvas實現的按住滑鼠拖動能夠繪製文字效果Canvas
- canvas 繪製圖案是重疊繪製而不是重置Canvas
- canvas繪製圖案是重疊繪製而不是重置Canvas
- Canvas(3)---繪製餅狀圖Canvas
- canvas系列教程之繪製矩形Canvas
- 用canvas繪製流星夜空Canvas
- 使用canvas繪製圓弧動畫Canvas動畫
- canvas繪製不重合的圓Canvas
- canvas繪製sin正弦曲線Canvas
- 流水賬系列之Canvas繪製-02Canvas
- canvas繪製扇形程式碼例項Canvas
- canvas lineWidth繪製原理Canvas
- canvas lineWidth 繪製原理Canvas
- canvas繪製卡通人臉形象效果Canvas
- canvas繪製圖片drawImage學習Canvas