画一个半圆

深度截图_选择区域_20180511104722.png

function drawScreen(myCanvas, r, lw, lr, rr, g) {
    // x,y => 圆心坐标点
    // r => 圆弧半径
    var arc = {
        x: myCanvas.width / 2,
        y: myCanvas.height / 2 + 16,
        r: (myCanvas.height - r) / 2
    }
    var ctx = myCanvas.getContext('2d')
    ctx.save()
    ctx.lineWidth = lw

    if (g) {
        //计算渐变起始坐标
        let L = Math.sqrt(Math.pow(arc.r, 2) / 2)
        let gx0 = arc.x - L
        let gy0 = arc.y + L
        /* 指定渐变区域 */
        var grad = ctx.createLinearGradient(
            arc.x - L,
            arc.y + L,
            arc.x - L,
            arc.y
        )
        grad.addColorStop(1, '#FEE891')
        grad.addColorStop(0, '#FEB832')
        ctx.strokeStyle = grad
    } else {
        ctx.strokeStyle = '#F2F3F8'
    }

    // 顺时针旋转
    ctx.beginPath()
    ctx.arc(arc.x, arc.y, arc.r, getRads(lr), getRads(rr))
    ctx.stroke()
}
function getRads(degrees) {
    return Math.PI * degrees / 180
}
function getDegrees(rads) {
    return rads * 180 / Math.PI
}
export default {
    mounted: () => {
        //获取根元素字体大小计算rem
        let fontSize = document.documentElement.style.fontSize
        CONST.fontSize = parseInt(fontSize.substring(0, fontSize.length - 2))
        CONST.width = document.body.clientWidth
        CONST.widthRem = CONST.width / CONST.fontSize
        drawScreen(document.getElementById('circle'), 0, 6, 135, 45) //绘制外层灰色
        drawScreen(document.getElementById('circle'), 36, 1.5, 132, 48) //绘制内层灰色
        drawScreen(document.getElementById('circle'), 0, 6, 135, 200, true) //绘制渐变
    }
}