canvas繪製文字

2021-10-02 20:06:37 字數 1285 閱讀 8827

canvas 提供了兩種方法來渲染文字:

filltext(text, x, y)

在指定的(x,y)位置填充指定的文字;

stroketext(text, x, y)

在指定的(x,y)位置繪製文字邊框;

**示例:

ctx.filltext("無悟飯空",100,100);

ctx.stroketext("無悟飯空",100,100);

font = value

當前我們用來繪製文字的樣式. 這個字串使用和 css font 屬性相同的語法. 

預設的字型是 10px sans-serif。

font屬性在指定時,必須要有大小和字型 缺一不可

textalign = value

文字對齊選項. 可選的值包括: left, right  center. 

left

文字左對齊。

right

文字右對齊。

center

文字居中對齊。

這裡的textalign="center"比較特殊。textalign的值為center時候

文字的居中是基於你在filltext的時候所給的x的值,

也就是說文字一半在x的左邊,一半在x的右邊

textbaseline = value

描述繪製文字時,當前文字基線的屬性。

top文字基線在文字塊的頂部。

middle

文字基線在文字塊的中間。

bottom

文字基線在文字塊的底部。

measuretext() 方法返回乙個 textmetrics 物件,包含關於文字尺寸的資訊(例如文字的寬度)

shadowoffsetx = float;shadowoffsety = float

shadowoffsetx 和 shadowoffsety 用來設定陰影在 x 和 y 軸的延伸距離,

它們預設都為 0。

shadowblur = float

shadowblur 用於設定陰影的模糊程度,其數值並不跟畫素數量掛鉤,

也不受變換矩陣的影響,預設為 0。

shadowcolor = color(必需項)

shadowcolor 是標準的 css 顏色值,用於設定陰影顏色效果,預設是全透明的黑色。

Canvas 繪製文字

filltext text,x,y maxwidth 填充文字 stroketext text,x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設,文字對齊界線開始的地方 左對齊指本地從左向右,右對齊指本地從右向左 ...

canvas繪製文字

屬性和方法 font value 設定字型 textalign value 設定字型對齊方式 start,end,left,right,center textbaseline value 設定基線對齊方式 top,hanging,middle,alphabetic,ideographic,botto...

canvas繪製文字

filltext text,x,y maxwidth 在指定的 x,y 位置填充指定的文字,繪製的最大寬度是可選的.stroketext text,x,y maxwidth 在指定的 x,y 位置繪製文字邊框,繪製的最大寬度是可選的.var canvas document.getelementbyi...