Canvas有关圆的计算

Question

在Canvas绘制东西的时候遇到的问题，想要通过虚线来达成一个圆环不同长度的效果代码如下JavaScriptcss在计算过程中，我输出了line计算后的结果确实与圆的周长相等（使用半径计算），但是位置不对。以及动画这里，2PI/时间应该就是单位时间应该走的角度，但是速度也不对。努力了大概5小时束手无策了……RunJS经帮助动画的速度应该是正常了，但是绘制的虚线不对依旧xd

Answer 1

说实话，效果是肯定能实现的。我没看你的代码，太累了不想看。我给你提供一点建议：

一般像写这种功能的时候首先要想的是先实现一条线段的功能，然后扩大效果（创建其他实例或者调用其他方法），用写插件的思想来考虑最好。

按照你这里的需求，我们先提取出可变的变量：

1. lineWidth ： 圆弧的宽度

2. startAngle && endAngle : 起始(结束)角度，用于通过arc绘制不同长度的圆弧

3. radius ：不同圆弧距离圆心的半径

4. strokeStyle ：每条圆弧对应的填充颜色

5. speed ： 圆弧做圆周运动时的速度，可以基于帧计算，也可以基于时间计算，后者比较好一点。

6. alpha : 透明度，可能会用到

你把这些东西提取出来就很容易弄了，以面向对象的方式或者函数编程都可以，先通过对应的方法弄出一条圆弧能正常运行，后面的不断调整参数创建对象就可以了。

动画主要是调整startAngle && endAngle的值