记录canvas学习3

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