canvas繪製文字

繪製字型時可以使用filltext方法或者stroketext方法。

filltext方法用填充的方式來繪製字串

context.filltext (text, x,y,[maxwidth]);

stroketext方法用輪廓的方式來繪製字串.

context.stroketext (text, x,y,[maxwidth]);

第乙個引數text表示要繪製的文字，

第二個引數x表示要繪製的文字的起點橫座標，

第三個引數y表示要繪製的文字的起點縱座標，

第四個引數maxwidth 為可選引數，表示顯示文字的時候最大的寬度，可以防止文字溢位

在body的屬性裡面，使用onload="draw('canvas' )「語句，呼叫指令碼檔案中的draw函式進行圖形繪畫

畫布的建立方法：指定 id ， width（畫布寬度）， height（畫布高度）

建立乙個畫布，長度為800，高度為300

1

<
body 
onload
="draw('canvas')"
>
2<
canvas 
id="canvas"
width
="800"
height
="300"
>
canvas
>
3body
>

屬性值可以是top（頂部對齊）

hanging（懸掛） middle（中間對齊） bottom（底部對齊） alphabetic是預設值

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...