Canvas 文字渲染

2021-08-14 20:55:59 字數 993 閱讀 1199

文字渲染基礎:首先定義font屬性,然後用filltext()對文字進行渲染。

context.font = 「bold 40px arial」;

context.filltext(string,x,y,[maxlen]);

其中,filltext()的第乙個引數是要書寫的字串,第

二、三個引數是書寫的位置,第四個引數是可選引數,它描述的是繪製這一行文字的最長寬度,單位是畫素;

除此之外canvas還有stroketext(string,x,y,[maxlen])方法來為文字描邊。

文字渲染的基本內容:

1.font

font預設值:「20px sans-serif」

font可以對font-style、font-variant、font-weight、font-size、font-family進行設定;

2.文字對齊

textalign定義文字水平方向的對齊方式,textbaseline 定義文字垂直方向的對齊方式;它們的基準是給定文字的基礎座標值;

context.textalign = left / center / right;

context.textbaseline = top / middle / bottom / alphabetic(default) / ideographic / hanging;

其中,alphabetic是指基於拉丁字母來設計基準線,ideographic是指基於漢字等方塊文本來設計基準線,hanging是指基於印度文本來設計基準線。

3.文字的度量

context.measuretext(string).width

該方法傳入乙個字串,它將返回乙個物件,這個物件擁有乙個width的屬性來描述傳入字串在canvas上渲染是字串的寬度。

Canvas文字渲染

context.font 文字樣式 default 20px sans serif font包含 font style normal 預設 italic 斜體字 oblique 傾斜體字 font variant normal 預設 small caps 小型大寫字母代替小寫字母 font weig...

Canvas文字渲染

font屬性可以接收像css裡面font屬性一樣的字串 粗體 40px 字型 context.font bold 40px arial param string 想要書寫的字串 param x 字串的位置x座標 param y 字串的位置y座標 param maxlen 可選引數,表示繪製這段文字所...

canvas渲染模式

canvas有三種渲染模式可供選擇,分別是overlay,camera,world 其中overlay為覆蓋模式,即永遠最後渲染,覆蓋其他物體和ui。camera為相機模式,渲染順序依據相機。world為世界模式,並不因相機而改變,至於距離有關。實際工程中,我們會運用多個canvas,那麼各種模式下...