渐变填充

线性渐变是一种沿直线方向过渡颜色的效果。

方法语法

const gradient = ctx.createLinearGradient(x0, y0, x1, y1)
gradient.addColorStop(offset, color)

基本用法

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// 创建水平渐变
const gradient = ctx.createLinearGradient(0, 0, 200, 0)
gradient.addColorStop(0, '#3498db')
gradient.addColorStop(1, '#e74c3c')

ctx.fillStyle = gradient
ctx.fillRect(0, 0, 200, 100)

水平渐变演示

垂直渐变

// 创建垂直渐变
const vGradient = ctx.createLinearGradient(0, 0, 0, 200)
vGradient.addColorStop(0, '#2ecc71')
vGradient.addColorStop(0.5, '#f39c12')
vGradient.addColorStop(1, '#e74c3c')

ctx.fillStyle = vGradient
ctx.fillRect(0, 0, 100, 200)

垂直渐变演示

对角渐变

// 创建对角渐变
const dGradient = ctx.createLinearGradient(0, 0, 200, 200)
dGradient.addColorStop(0, '#1abc9c')
dGradient.addColorStop(0.5, '#3498db')
dGradient.addColorStop(1, '#9b59b6')

ctx.fillStyle = dGradient
ctx.fillRect(0, 0, 200, 200)

对角渐变演示

多色渐变

// 创建多色渐变
const multiGradient = ctx.createLinearGradient(0, 0, 400, 0)
multiGradient.addColorStop(0, '#e74c3c')
multiGradient.addColorStop(0.2, '#f39c12')
multiGradient.addColorStop(0.4, '#f1c40f')
multiGradient.addColorStop(0.6, '#2ecc71')
multiGradient.addColorStop(0.8, '#3498db')
multiGradient.addColorStop(1, '#9b59b6')

ctx.fillStyle = multiGradient
ctx.fillRect(0, 0, 400, 100)

多色渐变演示

渐变应用于不同形状

// 渐变填充圆形
const gradient = ctx.createLinearGradient(0, 0, 100, 100)
gradient.addColorStop(0, '#3498db')
gradient.addColorStop(1, '#e74c3c')

ctx.fillStyle = gradient
ctx.beginPath()
ctx.arc(50, 50, 40, 0, Math.PI * 2)
ctx.fill()

// 渐变填充三角形
ctx.beginPath()
ctx.moveTo(150, 10)
ctx.lineTo(200, 90)
ctx.lineTo(100, 90)
ctx.closePath()
ctx.fill()

不同形状演示

注意事项

渐变坐标相对于画布

// 渐变坐标是相对于画布，不是相对于图形
const gradient = ctx.createLinearGradient(0, 0, 200, 0)
gradient.addColorStop(0, '#ff0000')
gradient.addColorStop(1, '#0000ff')

ctx.fillStyle = gradient
// 即使图形在(100, 0)，渐变仍然从画布(0, 0)开始
ctx.fillRect(100, 0, 100, 100)

颜色停止点顺序

// 颜色停止点必须按顺序排列
const gradient = ctx.createLinearGradient(0, 0, 200, 0)
gradient.addColorStop(0, '#ff0000')
gradient.addColorStop(0.5, '#00ff00')
gradient.addColorStop(1, '#0000ff')
// 正确：0 -> 0.5 -> 1

透明度渐变

// 可以使用rgba创建透明度渐变
const gradient = ctx.createLinearGradient(0, 0, 200, 0)
gradient.addColorStop(0, 'rgba(255, 0, 0, 1)')
gradient.addColorStop(1, 'rgba(255, 0, 0, 0)')
// 从不透明红色渐变到透明

透明度渐变演示