<canvas id="canvas"></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()
效果