这篇文章主要介绍了详解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第二种是用角度带入的 请注意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以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是详解canvas在圆弧周围绘制文本的两种写法的详细内容，更多请关注0133技术站其它相关文章！
