canvas｜画个🌟🌟

刚接触canvas

其中需要很多数学知识，为了捡起数学，找个例子练习一下

画个✨🌟🌟吧：

function getPointOfFiveStar(center, size) {
    // center: { x: 10, y: 10 }     size: 10
    let {x, y} = center
    let l1 = (1 - Math.pow(Math.tan(converDeg(18)), 2)) * size / (3 - Math.pow(Math.tan(converDeg(18)), 2))
    let l2 = Math.tan(converDeg(36)) * l1
    let l3 = Math.cos(converDeg(18)) * size
    let l4 = (size - l1) / Math.cos(converDeg(18))
    let l5 = l4 * Math.cos(converDeg(36))
    const res = []
    let p1 = {x: x, y: y - size}
    let p2 = {}
    p2.x = x + l2
    p2.y = y - l1
    let p10 = {
        x: x - l2, y: y - l1
    }
    let p3 = {
        x: x + l3,
        y: y - l1
    }
    let p9 = {
        x: x - l3,
        y: y - l1
    }
    let p4 = {
        x: x + l3 - l5,
        y: y - l1 + l4 * Math.sin(converDeg(36))
    }
    let p8 = {
        x: x - l3 + l5,
        y: y - l1 + l4 * Math.sin(converDeg(36))
    }
    let p5 = {
        x: x + size * Math.cos(converDeg(36)),
        y: y + size * Math.cos(converDeg(36))
    }
    let p7 = {
        x: x - size * Math.cos(converDeg(36)),
        y: y + size * Math.cos(converDeg(36))
    }
    let p6 = {
        x: x,
        y: y + (l3 - l5) / Math.cos(converDeg(18))
    }

    res.push(p1)
    res.push(p2)
    res.push(p3)
    res.push(p4)
    res.push(p5)
    res.push(p6)
    res.push(p7)
    res.push(p8)
    res.push(p9)
    res.push(p10)
    res.push(p1)
    return res
}

function draw() {
    const canvas = document.getElementById('canvas-1')
    if (canvas.getContext) {
        const ctx = canvas.getContext('2d')
        ctx.beginPath()
        let pointList = getPointOfFiveStar({x: 100, y: 100}, 40)
        ctx.moveTo(pointList[0].x, pointList[0].y)
        pointList.forEach(point => ctx.lineTo(point.x, point.y))
        ctx.stroke()
    }
}

最后的效果呢。。。和想象的有点出入：
算了，就这样吧，想好看一点的话，修改一下p4和p8的x值就好了。