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文本样式
可以通过设置文本的font属性来设置文本的样式
可按顺序设置一系列font的样式，如style,weight,size,fontFamily等
至少要设置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文本垂直对齐方式
首先以绘制文本的起始点(60,60)的纵坐标为基点画一条直线
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
由上图可以发现，文本在垂直方向是以基线的顶端对齐的。
可通过修改textBaseLine属性来调整垂直对齐方式。
top：基线位于文本顶部
hanging:悬挂基线
middle:居中基线
ideogeophic：表意基线
bottom:底部基线
Collage_Fotor_Fotor.jpg
1.4文本水平对齐方式
可以通过设置textAlign属性来设置文本的对齐方式
常用属性如
left 左对齐
right 右对齐
center 居中
start 以基线起始x坐标左对齐
end 以基线起始x坐标右对齐
1.5文本投影
文本投影需要的常用属性
shadowColor:设置投影的颜色
shadowBlur:设置模糊的阶数，默认为0不模糊
shadowOffsetX:设置阴影x轴偏移量
shadowOffsetY:设置阴影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
