在Unit3中 环形文本的初始角度和结束角度的设置有何要求，每个字符的位移为何是那样计算的？

[zhanxinpeng]

环形文本的初始角度和结束角度的设置有何要求，每个字符的位移为何是那样计算的 没搞明白

[827652549]

你说的应该是unit3的环形文字吧。

关于初始角度和结束角度，是为了让文字显示更佳友好和做一些矫正，比如让第一个文字在正上方显示，刻意调整初始角度。其实你改变下那些变量看看效果就明白了，你有新的需求时，也可以根据你的需要改变初始值。

关于字符的位移：

关于字符的位移，我这种相当于是，所以直接移动坐标轴（你可以理解成坐标原点），并在移动坐标轴后绘制字体到坐标原点，从而绘制到指定位置。其实从实现上讲，如果每次都计算每一个文字的具体位置和角度，再逐个绘制到画布上，很容易想到，当然也可以实现。

[zhanxinpeng]

哈哈，感谢大佬回复👍🏻现在没在电脑前，我自己试的时候倒是也改变过变量的初始值，会出现字重叠，顺序错乱的情况所以就在git上向您提问初始值结束值是不是有什么特殊的要求，至于您说的位移，也就是说你是移动坐标轴嘛，而不是对每个字进行位移，这点有点疑问，正常情况文字是一行排列，是如何通过移动坐标轴实现的，之前的教程还没来得及看(明天看)，如果有说到，麻烦大佬点拨一下，非常感谢

[827652549]

😝因为每次移动的时候，也对坐标轴做了旋转操作了～

具体可以看这行：

CanvasStudy/Unit3/CircleText.html

Line 142 in f47e582

context.rotate(Math.PI/2-angle);

[zhanxinpeng]

大佬 按我的理解是将初始角度和结束角度 按照字符串的长度平均分成X份，那两个字之间的角度就是X°，那第二个字的X,Y坐标是（circle.x + Math.sin(angle) * radius, circle.y - Math.cos(angle) * radius）, 旋转角度直接就是 X°，也能实现相同效果，我没看懂您示例中关于X,Y 坐标为何是这样计算（circle.x + Math.cos(angle) * radius, circle.y - Math.sin(angle) * radius ），请教一下

[827652549]

我没明白你为什么那么写，我在这边画了个草图看了一下，的确是我那样的写法，角度是取任意方向的射线到x轴正方向的夹角，这个不知道我俩是否一致。

而且，改成你那个并没有实现相同的效果，反而显示有些奇怪和搞怪。

[zhanxinpeng]

就是这个角度的选取我们不同，按我理解 角度的选取不是应以两个字的射线的夹角为准嘛？为何会是与X轴正方向，你给了初始角度和结束角度 除以了字符串的长度，我理解为相当于是平分

具体角度代码如下 是能实现相同效果的
//因为修改了计算 所以会修改初始角度 和结束角度

startAngle = Math.PI * 2 ,
 endAngle = Math.PI / 8 ,
 while (index < string.length) {
                //获取传入的字符串的每个字符
                character = string.charAt(index);

                context.save();
                context.beginPath();
                //位移到每个字符的指定位置
                context.translate(circle.x + Math.sin(angle) * radius, circle.y - Math.cos(angle) * radius);
                // context.translate(circle.x + Math.cos(angle) * radius, circle.y - Math.sin(angle) * radius);

                //旋转坐标系到每个字符应该达到到角度
                context.rotate(angle);
                context.fillText(character, 0, 0);
                context.strokeText(character, 0, 0);

                //角度递减
                angle += angleDecrement;

                index++;

                context.restore();
            }

[zhanxinpeng]

只要保证开始角度 sin(角度) 为 0 即可

[827652549]

这样呀，我这边是使用了绘制圆的逻辑，CanvasRenderingContext2D.arc()的起始点就是x轴正方向

[zhanxinpeng]

这样 我对Canvas是半吊子 所以按我理解的一直没想到为啥大佬示例中为何是样子的 因为确实效果可是实现，所以苦恼了蛮久 既然是教程讲解，可以多写一下注释哦，不过有点好奇，绘制圆的逻辑能麻烦解释一下嘛 不太明白 这里能发草图嘛 哈哈

[827652549]

哈哈 闻道有先后，术业有专攻而已。这个当时是刚好10.24日，随手写的，没太注意，教程分享。

关于绘制圆，可以看这个https://blog.csdn.net/HuoYiHengYuan/article/details/100516741

我有个提议，刚好你也在研究这个方面的内容，不如关于这个代码，你来添加一些注释，commit并pr之后，我来审查合并，共同参与这个教程，如何？😊

[zhanxinpeng]

哈哈 尽我所能 晚点我研究了大佬发的绘制圆的再将我写的注释发给你  

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人:&nbsp;"Su Yiheng"<notifications@github.com&gt;; 发送时间:&nbsp;2020年6月24日(星期三) 中午11:32 收件人:&nbsp;"827652549/CanvasStudy"<CanvasStudy@noreply.github.com&gt;; 抄送:&nbsp;"占鑫鹏"<251578734@qq.com&gt;;"Author"<author@noreply.github.com&gt;; 主题:&nbsp;Re: [827652549/CanvasStudy] 在Unit3中 环形文本的初始角度和结束角度的设置有何要求，每个字符的位移为何是那样计算的？ (#1) 哈哈 闻道有先后，术业有专攻而已。这个当时是刚好10.24日，随手写的，没太注意，教程分享。 关于绘制圆，可以看这个https://blog.csdn.net/HuoYiHengYuan/article/details/100516741 我有个提议，刚好你也在研究这个方面的内容，不如关于这个代码，你来添加一些注释，commit并pr之后，我来审查合并，共同参与这个教程，如何？😊 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.