样式与颜色

Canvas提供了丰富的样式和颜色设置选项，可以创建各种视觉效果。

颜色设置方式

Canvas支持多种颜色设置方式：

// 十六进制颜色
ctx.fillStyle = '#ff0000'
ctx.strokeStyle = '#00ff00'

// RGB颜色
ctx.fillStyle = 'rgb(255, 0, 0)'
ctx.strokeStyle = 'rgb(0, 255, 0)'

// RGBA颜色（带透明度）
ctx
.fillStyle = 'rgba(255, 0, 0, 0.5)'
ctx.strokeStyle = 'rgba(0, 255, 0, 0.8)'

// 颜色名称
ctx.fillStyle = 'red'
ctx.strokeStyle = 'green'

// HSL颜色
ctx.fillStyle = 'hsl(0, 100%, 50%)'
ctx.strokeStyle = 'hsl(120, 100%, 50%)'

// HSLA颜色
ctx.fillStyle = 'hsla(0, 100%, 50%, 0.5)'
ctx.strokeStyle = 'hsla(120, 100%, 50%, 0.8)'

颜色设置演示

填充与描边

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

// 设置填充颜色
ctx.fillStyle = '#3498db'

// 设置描边颜色
ctx.strokeStyle = '#e74c3c'

// 绘制矩形
ctx.fillRect(50, 50, 100, 80)
ctx.strokeRect(50, 150, 100, 80)

// 同时填充和描边
ctx.beginPath()
ctx.arc(250, 90, 40, 0, Math.PI * 2)
ctx.fill()
ctx.stroke()

填充与描边演示

透明度

// 使用globalAlpha设置全局透明度
ctx.globalAlpha = 0.5

// 使用rgba设置单个透明度
ctx.fillStyle = 'rgba(52, 152, 219, 0.5)'

// 绘制多个重叠图形
ctx.fillStyle = 'rgba(231, 76, 60, 0.7)'
ctx.fillRect(50, 50, 100, 100)

ctx.fillStyle = 'rgba(46, 204, 113, 0.7)'
ctx.fillRect(100, 100, 100, 100)

ctx.fillStyle = 'rgba(52, 152, 219, 0.7)'
ctx.fillRect(150, 50, 100, 100)

透明度演示

渐变

Canvas支持线性和径向渐变：

// 线性渐变
const linearGradient = ctx.createLinearGradient(0, 0, 200, 0)
linearGradient.addColorStop(0, '#3498db')
linearGradient.addColorStop(0.5, '#9b59b6')
linearGradient.addColorStop(1, '#e74c3c')

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

// 径向渐变
const radialGradient = ctx.createRadialGradient(100, 50, 0, 100, 50, 100)
radialGradient.addColorStop(0, '#ffffff')
radialGradient.addColorStop(0.3, '#3498db')
radialGradient.addColorStop(1, '#2980b9')

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

渐变演示

阴影效果

// 设置阴影
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
ctx.shadowBlur = 10
ctx.shadowOffsetX = 5
ctx.shadowOffsetY = 5

// 绘制带阴影的图形
ctx.fillStyle = '#3498db'
ctx.fillRect(50, 50, 100, 80)

// 清除阴影
ctx.shadowColor = 'transparent'
ctx.shadowBlur = 0
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0

阴影效果演示

图案填充

// 创建图案
const patternCanvas = document.createElement('canvas')
patternCanvas.width = 20
patternCanvas.height = 20
const patternCtx = patternCanvas.getContext('2d')

patternCtx.fillStyle = '#3498db'
patternCtx.fillRect(0, 0, 10, 10)
patternCtx.fillRect(10, 10, 10, 10)

const pattern = ctx.createPattern(patternCanvas, 'repeat')
ctx.fillStyle = pattern
ctx.fillRect(0, 0, 200, 200)

图案填充演示

注意事项

颜色值大小写

// 以下都是有效的
ctx.fillStyle = '#ff0000'
ctx.fillStyle = '#FF0000'
ctx.fillStyle = '#Ff0000'

透明度范围

// alpha值范围是0-1
ctx.fillStyle = 'rgba(255, 0, 0, 0)'    // 完全透明
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'  // 半透明
ctx.fillStyle = 'rgba(255, 0, 0, 1)'    // 完全不透明

渐变颜色停止点

// 颜色停止点必须在0-1之间
const gradient = ctx.createLinearGradient(0, 0, 200, 0)
gradient.addColorStop(0, '#ff0000')      // 起点
gradient.addColorStop(0.5, '#00ff00')    // 中点
gradient.addColorStop(1, '#0000ff')      // 终点

阴影性能

// 阴影会影响性能，使用后及时清除
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
ctx.shadowBlur = 10

ctx.fillRect(0, 0, 100, 100)

// 清除阴影
ctx.shadowColor = 'transparent'
ctx.shadowBlur = 0
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0