canvas快速入門4 繪製文字

2021-09-10 12:35:49 字數 816 閱讀 7215

我們在使用canvas畫各種圖的時候,大多時候會有文字的繪製,比如,各種圖表,進度條,鐘錶等等,都需要繪製文字。所以繪製文字也是canvas入門必須的基礎

繪製文字很簡單就下面這個方法。

但是想一下,我們用css對字型通常有哪些操作?比如字型大小,顏色,字型等。其實這些,canvas中都提供了相應的api。

>

const canvas = document.

getelementbyid

('canvas8');

if(canvas.getcontext)

else

script

>

>

const canvas = document.

getelementbyid

('canvas8');

if(canvas.getcontext)

else

script

>

計算字串長度方法返回的是乙個物件,其中有乙個width屬性,這個屬性值就是計算的寬度值,從上面的圖可以看出字串的長度是字串的實際長度,與設定的最大長度無關

繪製文字的相關api有很多,不需要都記住,記住下面總結的4個,其他用到時再查一樣可以,他的api跟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繪製文字

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