通過stroketext方法可以繪製描邊的文字
// 語法
ctx.
stroketext
(text, x, y [
, maxwidth]
);
text 使用當前 font，textalign，textbaseline和direction 的值對文字進行渲染。
x 文字起始點的 x 軸座標。
y 文字起始點的 y 軸座標。
maxwidth 可選,需要繪製的最大寬度。如果指定了值，並且經過計算字串的寬度比最大寬度還要寬，字型為了適應會使用乙個水平縮小的字型（如果通過水平縮放當前的字型，可以進行有效的或者合理可讀的處理）或者小號的字型
var ocanvas = document.
getelementbyid
('cvs'
)var ctx = ocanvas.
getcontext
('2d'
)// 定義字型屬性
ctx.font =
"bold 80px 微軟雅黑"
ctx.
stroketext
('螺釘課堂'
,100
,100
)
// 語法
ctx.
filltext
(text, x, y [
, maxwidth]
)
例項：
var ocanvas = document.
getelementbyid
('cvs'
)var ctx = ocanvas.
getcontext
('2d'
)// 定義字型屬性
ctx.font =
"bold 80px 微軟雅黑"
ctx.
filltext
('螺釘課堂'
,100
,100
)
ctx.
measuretext
(text)
引數：
text 需要測量的文字。
返回值：
textmetrics 物件
var ocanvas = document.
getelementbyid
('cvs'
)var ctx = ocanvas.
getcontext
('2d'
)var text =
'螺釘課堂'
// 定義字型屬性
ctx.font =
"bold 80px 微軟雅黑"
var position = ocanvas.width /
2- ctx.
measuretext
(text)
.width /
2ctx.
stroketext
(text, position,
100)
font屬性和css中的用法一樣
// 語法
ctx.font =
"font-style font-weight font-size/font-height font-family"
textalign用來設定水平方向的對齊方式
ctx.textalign =
'屬性值'
這裡的屬性值可以為：
start 開始位置，指定座標
end 結束位置，指定座標
left 左對齊
right 右對齊
center 居中對齊
textbaseline用來設定垂直方向的對齊方式
// 語法
ctx.textbaseline =
'屬性值'
屬性值有：
top 文字基線在文字塊的頂部。
middle 文字基線在文字塊的中間。
bottom 文字基線在文字塊的底部。 與 ideographic 基線的區別在於 ideographic 基線不需要考慮下行字母。
alphabetic 文字基線是標準的字母基線。
canvas系列教程07 canvas動畫基礎1
上面我們玩了乙個圖表，大家學好結構，然後在那個基礎上去擴充套件各種圖表，慢慢就可以形成自己的圖表庫了。也可以多看看一些國外的圖表庫簡單的版本，分析分析，讀 對提高用處很大。我說了canvas兩大主流用途，乙個是圖表，乙個是遊戲，在寫遊戲專案之前，我們先來點基礎，關於動畫，沒有動畫基礎講canvas遊...
canvas系列教程07 canvas動畫基礎1
上面我們玩了乙個圖表，大家學好結構，然後在那個基礎上去擴充套件各種圖表，慢慢就可以形成自己的圖表庫了。也可以多看看一些國外的圖表庫簡單的版本，分析分析，讀 對提高用處很大。我說了canvas兩大主流用途，乙個是圖表，乙個是遊戲，在寫遊戲專案之前，我們先來點基礎，關於動畫，沒有動畫基礎講canvas遊...
canvas系列教程08 canvas各種坑
首先是編輯器，之前用了用atom，這幾天寫了乙個canvas圖表庫，全程使用atom，說下感受。webstorm 就相當於你媽，你想要的不想要的都給你，但是顯得有點嘮嘮叨叨 功能太全，好多用不上，開啟慢 而atom就相當於你的兒子，一張白紙，只要你調理的好，太就會按照你的想法去做事兒 簡潔的介面，豐...