使用canvas绘制从上至下的渐变圆

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.beginPath(); // 开一条新路

    var grd=ctx.createLinearGradient(0,0,0,170);
    grd.addColorStop("0","pink");
    grd.addColorStop("0.5","white");
    grd.addColorStop(1,"pink");

    ctx.fillStyle = grd;
    ctx.arc(100, 80, 60, 0 ,Math.PI*2);
    ctx.fill(); // 画圆
    ctx.closePath()

效果