1.文本繪制

1.1繪制方法

strokeText(text,x,y) 描邊文本
fillText(text,x,y) 填充文本

    context.strokeStyle='#00f'
    context.fillStyle='#f00'
    context.strokeText('helloWorld',60,60)
    context.fillText('helloWorld',60,100)

image.png

1.2文本樣式

可以通過設(shè)置文本的font屬性來設(shè)置文本的樣式
可按順序設(shè)置一系列font的樣式，如style,weight,size,fontFamily等
至少要設(shè)置size和fontFamily

    context.strokeStyle='#00f'
    context.fillStyle='#f00'
    context.font='700 30px Arail'
    context.strokeText('helloWorld',60,60)
    context.fillText('helloWorld',60,100)

image.png

1.3文本垂直對(duì)齊方式

首先以繪制文本的起始點(diǎn)(60,60)的縱坐標(biāo)為基點(diǎn)畫一條直線

    context.moveTo(10,60)
    context.lineTo(390,60)
    context.stroke()
    context.strokeStyle='#00f'
    context.fillStyle='#f00'
    context.font='700 30px Arail'
    context.strokeText('helloWorld',60,60)

image.png

由上圖可以發(fā)現(xiàn)，文本在垂直方向是以基線的頂端對(duì)齊的。
可通過修改textBaseLine屬性來調(diào)整垂直對(duì)齊方式。

top：基線位于文本頂部
hanging:懸掛基線
middle:居中基線
ideogeophic：表意基線
bottom:底部基線

Collage_Fotor_Fotor.jpg

1.4文本水平對(duì)齊方式

可以通過設(shè)置textAlign屬性來設(shè)置文本的對(duì)齊方式

常用屬性如
left 左對(duì)齊
right 右對(duì)齊
center 居中
start 以基線起始x坐標(biāo)左對(duì)齊
end 以基線起始x坐標(biāo)右對(duì)齊

1.5文本投影

文本投影需要的常用屬性
shadowColor:設(shè)置投影的顏色
shadowBlur:設(shè)置模糊的階數(shù)，默認(rèn)為0不模糊
shadowOffsetX:設(shè)置陰影x軸偏移量
shadowOffsetY:設(shè)置陰影y軸偏移量

    context.fillStyle='#f00'
    context.font='700 30px Arail'
    context.shadowColor='#0f0'
    context.shadowBlur=10
    context.shadowOffsetX=10
    context.shadowOffsetY=10
    context.fillText('helloWorld',60,60)

image.png