html <canvas id="canvas"></canvas> js var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') var width = document.documentElement.clientWidth var height = document.documentElement.clientHeight canvas.setAttribute('width',width) canvas.setAttribute('height',height) var centerX = width / 2 var centerY = height / 2 ctx.beginPath() // ctx.arc(100, 100, 50, 0, 360, false) var lingrad = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, centerX) //参数分别为 内圆x坐标,y坐标,半径,外圆x坐标,y坐标,半径 lingrad.addColorStop(0, '#0e1c27') //addColorStop()设置渐变范围及颜色 lingrad.addColorStop(0.5 , '#02cf99') lingrad.addColorStop(1, '#23253c') // console.log(width,height,centerX,centerY) ctx.fillStyle = lingrad ctx.fillRect(0, 0, width, height) // ctx.stroke() ctx.closePath() 效果: