详解canvas在圆弧周围绘制文本的两种写法

教程是直接按弧度进行编写的

自己又试着用角度重新编写了一份，有些差别，总结起来还是用弧度比较方便，当然两种哪种理解的容易可以自行斟酌

写代码有时候不一定要按照教程一板一眼的写，最佳实践固然是好，但是自己尝试些别的也许有些别的收获不是么~

效果如下图

第一种是直接用弧度的

var canvas=document.getelementbyid("canvas")
    var context=canvas.getcontext("2d")

    var text_fill_style="rgba(100,130,240,0.5)"
    var text_stroke_style="rgba(200,0,0,0.7)"
    var text_size=64;
    circle={
        x:canvas.width/2,
        y:canvas.height/2,
        radius:200
    }
    function drawcirculartext(string,startangle,endangle){
      var radius=circle.radius //圆的半径
      var angledecrement=(startangle-endangle)/(string.length-1)//每个字母占的弧度
      var angle=parsefloat(startangle) //转一下数字
      var index=0;
      var character;

      context.save()
      context.fillstyle=text_fill_style;
      context.strokestyle=text_stroke_style;
      context.font=text_size+"px lucida sans"

      while(index<string.length){
        character=string.charat(index)
        context.save()
        context.beginpath()
        context.translate(circle.x+math.cos(angle)*radius,circle.y-math.sin(angle)*radius)
        context.rotate(math.pi/2-angle)   //math.pi/2为旋转90度  math.pi/180*x为旋转多少度
        context.filltext(character,0,0)
        context.stroketext(character,0,0)
        angle-=angledecrement
        index++
        context.restore()

      }
      context.restore()
    }
    context.textalign="center"
    context.textbaseline="middle"
   drawcirculartext("clockwise around the circle",math.pi*2,math.pi/8)  //第三个参数表示文字首位是否相接 差了多少弧度

第二种是用角度带入的 请注意drawcirculartext的第二个参数和第三个参数的不同

var canvas=document.getelementbyid("canvas")
    var context=canvas.getcontext("2d")

    var text_fill_style="rgba(100,130,240,0.5)"
    var text_stroke_style="rgba(200,0,0,0.7)"
    var text_size=64;
    circle={
        x:canvas.width/2,
        y:canvas.height/2,
        radius:200
    }
    function drawcirculartext(string,startangle,endangle){
      var radius=circle.radius //圆的半径
      var angledecrement=(startangle-endangle)/(string.length-1)//每个字母占的弧度
      var angle=startangle //
      
      var index=0;
      var character;

      context.save()
      context.fillstyle=text_fill_style;
      context.strokestyle=text_stroke_style;
      context.font=text_size+"px lucida sans"

      while(index<string.length){
        character=string.charat(index)
        context.save()
        context.beginpath()
        context.translate(circle.x+math.cos((math.pi/180)*angle)*radius,circle.y-math.sin((math.pi/180)*angle)*radius)
        context.rotate((math.pi/2)-(math.pi/180)*angle)   //math.pi/2为旋转90度  math.pi/180*x为旋转多少度
        context.filltext(character,0,0)
        context.stroketext(character,0,0)
        angle-=angledecrement
        index++
        context.restore()

      }
      context.restore()
    }
    context.textalign="center"
    context.textbaseline="middle"
   drawcirculartext("clockwise around the circle",360,10)  //第三个参数表示文字首位是否相接 差了多少弧度

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。