记录canvas学习3

作者: zkhChris | 来源:发表于2017-10-18 14:38 被阅读24次

    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

    相关文章

      网友评论

        本文标题:记录canvas学习3

        本文链接:https://www.haomeiwen.com/subject/rykkuxtx.html