Canvas圆弧绘制,绘制文本

圆弧绘制

  • arc()
    • x 圆心横坐标
    • y 圆心纵坐标
    • r 半径
    • startAngle 开始角度
    • endAngle 结束角度
    • anticlockwise 是否逆时针方向绘制(默认false表示顺时针;true表示逆时针)

绘制文本

  • ctx.font = '微软雅黑' 设置字体
  • strokeText()
  • fillText(text,x,y,maxWidth)
    • text 要绘制的文本
    • x,y 文本绘制的坐标(文本左下角)
    • maxWidth 设置文本最大宽度,可选参数
  • ctx.textAlign文本水平对齐方式,相对绘制坐标来说的
    • left
    • center
    • right
    • start 默认
    • end
  • ctx.direction属性css(rtl ltr) start和end于此相关
    • 如果是ltr,start和left表现一致
    • 如果是rtl,start和right表现一致
  • ctx.textBaseline 设置基线(垂直对齐方式 )
    • top 文本的基线处于文本的正上方,并且有一段距离
    • middle 文本的基线处于文本的正中间
    • bottom 文本的基线处于文本的证下方,并且有一段距离
    • hanging 文本的基线处于文本的正上方,并且和文本粘合
    • alphabetic 默认值,基线处于文本的下方,并且穿过文字
    • ideographic 和bottom相似,但是不一样
  • measureText() 获取文本宽度obj.width

猜你喜欢

转载自blog.csdn.net/qq_43021088/article/details/83153577