Canvas 繪製文字

2021-07-23 19:56:58 字數 1329 閱讀 6880

filltext(text,x,y[,maxwidth]):填充文字

stroketext(text,x,y[,maxwidth]):描邊文字

font:

font = 10px sans-serif;預設

text-anchor

start:預設,文字對齊界線開始的地方 (左對齊指本地從左向右,右對齊指本地從右向左)。

end:文字對齊界線結束的地方 (左對齊指本地從左向右,右對齊指本地從右向左)。

textalign:

left:文字左對齊。

right:文字右對齊。

center:文字居中對齊。

textbaseline:

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

hanging:文字基線是懸掛基線。

middle:文字基線是 em 方框的正中。

alphabetic:預設。文字基線是普通的字母基線。

ideographic:文字基線是表意基線。

bottom:文字基線是 em 方框的底端。

direction:

ltr:文字方向從左向右。

rtl:文字方向從右向左。

inherit:預設根據情況繼承 元素或者 document 。

ctx.measuretext(text)

引數: text

返回值: textmetrics物件

textmetrics物件:

都是些唯讀屬性

canvas繪製文字

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

canvas繪製文字

canvas 提供了兩種方法來渲染文字 filltext text,x,y 在指定的 x,y 位置填充指定的文字 stroketext text,x,y 在指定的 x,y 位置繪製文字邊框 示例 ctx.filltext 無悟飯空 100,100 ctx.stroketext 無悟飯空 100,10...

canvas繪製文字

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