特殊原因,隐藏问题请大家谅解
canvas 中圆的起始角 0 为 3 点钟方向,一个满圆的结束角度是 2π,半圆即为 2 * 0.5π,四分之一圆为 2 * 0.25π,推导出公式 2 * N * π,N 为所占圆的比例。
2π
2 * 0.5π
2 * 0.25π
2 * N * π
N
代入数据:
假如数据 5 为 30%,那么结束角为 2 * 0.3π;假如数据 4 为 28%,由于是逆向,所以结束角度为 2 * (1 - 0.28)π,好在 canvas 可以选择正反绘图方向;下一步,5 和 4 的结束角变成 2 和 3 的起始角,计算是一样的;依次类推……
2 * 0.3π
2 * (1 - 0.28)π
这样最后画出的圆是从 3 点钟方向开始的,而你的需求起始是 12 点钟方向,最后可以把画布向左旋转 45 度。也可以在一开始就代入起始角度计算结束角,正向公式为:(S + 2 * N) * π,反向为:(S - 2 * N) * π,S 为起始角,比如你的是 1.5。
(S + 2 * N) * π
(S - 2 * N) * π
S
1.5
闲来无事,写个 Demo。https://jsfiddle.net/imys/bt2zLvc5/
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
暂无简介
文章 0 评论 0
接受
发布评论
评论(1)
canvas 中圆的起始角 0 为 3 点钟方向,一个满圆的结束角度是
2π
,半圆即为2 * 0.5π
,四分之一圆为2 * 0.25π
,推导出公式2 * N * π
,N
为所占圆的比例。代入数据:
假如数据 5 为 30%,那么结束角为
2 * 0.3π
;假如数据 4 为 28%,由于是逆向,所以结束角度为
2 * (1 - 0.28)π
,好在 canvas 可以选择正反绘图方向;下一步,5 和 4 的结束角变成 2 和 3 的起始角,计算是一样的;
依次类推……
这样最后画出的圆是从 3 点钟方向开始的,而你的需求起始是 12 点钟方向,最后可以把画布向左旋转 45 度。
也可以在一开始就代入起始角度计算结束角,正向公式为:
(S + 2 * N) * π
,反向为:(S - 2 * N) * π
,S
为起始角,比如你的是1.5
。闲来无事,写个 Demo。
https://jsfiddle.net/imys/bt2zLvc5/