详解canvas在圆弧周围绘制文本的两种写法
程序员文章站
2023-12-14 13:32:10
这篇文章主要介绍了详解canvas在圆弧周围绘制文本的两种写法,直接按弧度进行编写的,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 18-05-22...
教程是直接按弧度进行编写的
自己又试着用角度重新编写了一份,有些差别,总结起来还是用弧度比较方便,当然两种哪种理解的容易可以自行斟酌
写代码有时候不一定要按照教程一板一眼的写,最佳实践固然是好,但是自己尝试些别的也许有些别的收获不是么~
效果如下图
第一种是直接用弧度的
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) //第三个参数表示文字首位是否相接 差了多少弧度
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。