Canvas 渐变
线性渐变
js
createLinearGradient
ctx.beginPath()
// 渐变的方向
let grad=ctx.createLinearGradient(0,0,500,200)
// 渐变的样式
grad.addColorStop("0","red")
grad.addColorStop("0.3","blue")
grad.addColorStop("0.7","pink")
grad.addColorStop("1","yellow")
ctx.fillStyle=grad
ctx.rect(0,0,500,200)
ctx.fill()放射性渐变
js
createRadialGradient 放射性渐变。
ctx.beginPath()
let grad=ctx.createRadialGradient(300,200,10,300,200,180)
// 渐变的样式
grad.addColorStop("0","red")
grad.addColorStop("0.3","blue")
grad.addColorStop("0.7","green")
grad.addColorStop("1","yellow")
ctx.fillStyle=grad
ctx.arc(300,200,180,0,2*Math.PI)
ctx.fill()