帝王谷资源网 Design By www.wdxyy.com
教程是直接按弧度进行编写的
自己又试着用角度重新编写了一份,有些差别,总结起来还是用弧度比较方便,当然两种哪种理解的容易可以自行斟酌
写代码有时候不一定要按照教程一板一眼的写,最佳实践固然是好,但是自己尝试些别的也许有些别的收获不是么~
效果如下图
第一种是直接用弧度的
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) //第三个参数表示文字首位是否相接 差了多少弧度
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
canvas,圆弧,绘制文本
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年07月03日
2024年07月03日
- 绝区零闪避鸣徽有哪些 绝区零闪避鸣徽效果介绍
- 《逸剑风云决》新坐骑解锁条件
- 《幻兽帕鲁》新增技能果实介绍
- 《原神》4.7飞迸湍流二重奏活动介绍
- 谢宇威1995-《直到现在我还不明白我是唯一的借口》台湾首版[WAV+CUE]
- 尚雯婕2012-最后的赞歌2CD[华谊兄弟][FLAC+CUE]
- 常石磊2010-自己[风向乐动][WAV+CUE]
- 玩家吐槽索尼第一方:15家工作室11家不知道新作是啥
- 曾在韩国爆火的糖葫芦遇冷 韩国糖葫芦店接连倒闭
- 清凉一夏!《妮姬》官方发布各角色迷人泳装视频
- 群星.2008-梦想的翅膀2CD【种子音乐】【WAV+CUE】
- 林良乐.2005-辉煌全记录2辑【乡城】【WAV+CUE】
- 林忆莲.2016-陪着我走【环球】【WAV+CUE】
- 原画壁纸及美图第259期,无水印可自取
- 原画壁纸及美图第260期,无水印可自取