大致思路：
- 怎么画星星？
- 怎么画有不同填充比例的星星？
只要能解决这两个问题，基本就成了。
1. 如何用 canvas 画一个星星?
当然，画星星这种事情肯定早就有人做过啦!
如上图所示，利用大小两个圆，每旋转 72 度取一个点，用 lineTo 连接最后闭合，就是一个五角星了。
2. 如何给星星填充任意比例的颜色?
看看别人怎么做的。
这是用 svg 实现的，看了下源码，是用渐变实现的填充比例。
原来是渐变啊，对啊，不是渐变还能是什么呢？我怎么就没想到。。。
function drawStar({x, y, r, R, rot, index}){
const ctx = context;
const gradient = ctx.createLinearGradient(x - R, 0 , x + R, 0)
const stop = Math.min(Math.max((index + 1) * oneStarPercent - percent, 0), oneStarPercent)
const rate = (oneStarPercent - stop) / oneStarPercent
gradient.addColorStop(rate, ratingColor)
gradient.addColorStop(Math.min(1, rate + 0.01), starColor)
// ....
}
这里的重点就在 addColorStop，通过调整渐变的分界线，控制星星填充的比例。
搞定基础的，后面就水到渠成了。
step 评分间隔，0.5 半星，0.1 就是 0.1 星。
starNum 星星数量 10 星。
除了五角星之外，还可以改变一下循环次数，变成：
手里剑
锯齿星
螺旋星
改变一下内外圆的比例还可以变成一个
丰满的五角星
当然，用 canvas 虽然能实现评分功能，但要想做类似烟花效果，跳动效果等还是有点复杂。。。这点就比不上 svg 了，canvas 的优势就在于，它是 js 写的啊。[doge]
所以还可以用同样的画星星的方法做类似于
