您现在的位置是：网站首页> 编程资料编程资料
详解canvas在圆弧周围绘制文本的两种写法HTML5 Canvas中使用用路径描画圆弧
2023-10-16
279人已围观
简介 这篇文章主要介绍了详解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以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相关内容
- 全民飞机大战第一关通关攻略心得_全民飞机大战通关教程_手机游戏_游戏攻略_
- 全民飞机大战宠物资料介绍_全民飞机大战宠物有哪些_手机游戏_游戏攻略_
- 全民飞机大战天神祝福道具全面解析_全民飞机大战道具说明_手机游戏_游戏攻略_
- 全民飞机大战刷金币教程攻略_全民飞机大战刷金币心得_手机游戏_游戏攻略_
- 全民飞机大战刷分图文攻略_全民飞机大战刷分心得_手机游戏_游戏攻略_
- 全民英雄撼地小牛技能加点攻略详解_手机游戏_游戏攻略_
- 全民英雄游戏攻略 主坦克出装推荐_手机游戏_游戏攻略_
- 全民英雄 谜团怎么出装 谜团出装心得经验_手机游戏_游戏攻略_
- 梦幻火影宝石系统玩法全面解析_手机游戏_游戏攻略_
- 天天飞车 a级男爵怎么获得 a级男爵好不好_手机游戏_游戏攻略_
