大致思路:
- 怎么画星星?
- 怎么画有不同填充比例的星星?
只要能解决这两个问题,基本就成了。
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]
所以还可以用同样的画星星的方法做类似于