图案填充

图案填充使用createPattern方法创建重复的图案效果。

方法语法

const pattern = ctx.createPattern(image, repetition)

重复方式

基本用法

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

// 创建图案画布
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)

棋盘格图案演示

条纹图案

// 创建水平条纹
const hStripeCanvas = document.createElement('canvas')
hStripeCanvas.width = 10
hStripeCanvas.height = 20
const hStripeCtx = hStripeCanvas.getContext('2d')

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

const hPattern = ctx.createPattern(hStripeCanvas, 'repeat')
ctx.fillStyle = hPattern
ctx.fillRect(0, 0, 100, 100)

// 创建垂直条纹
const vStripeCanvas = document.createElement('canvas')
vStripeCanvas.width = 20
vStripeCanvas.height = 10
const vStripeCtx = vStripeCanvas.getContext('2d')

vStripeCtx.fillStyle = '#e74c3c'
vStripeCtx.fillRect(0, 0, 10, 10)

const vPattern = ctx.createPattern(vStripeCanvas, 'repeat')
ctx.fillStyle = vPattern
ctx.fillRect(110, 0, 100, 100)

条纹图案演示

点状图案

// 创建点状图案
const dotCanvas = document.createElement('canvas')
dotCanvas.width = 20
dotCanvas.height = 20
const dotCtx = dotCanvas.getContext('2d')

dotCtx.fillStyle = '#ecf0f1'
dotCtx.fillRect(0, 0, 20, 20)
dotCtx.fillStyle = '#e74c3c'
dotCtx.beginPath()
dotCtx.arc(10, 10, 5, 0, Math.PI * 2)
dotCtx.fill()

const dotPattern = ctx.createPattern(dotCanvas, 'repeat')
ctx.fillStyle = dotPattern
ctx.fillRect(0, 0, 200, 200)

点状图案演示

重复方式演示

应用于形状

// 图案填充圆形
const pattern = ctx.createPattern(patternCanvas, 'repeat')
ctx.fillStyle = pattern

ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2)
ctx.fill()

// 图案填充三角形
ctx.beginPath()
ctx.moveTo(200, 50)
ctx.lineTo(250, 150)
ctx.lineTo(150, 150)
ctx.closePath()
ctx.fill()

应用于形状演示

注意事项

图像加载

// 使用外部图像需要先加载
const img = new Image()
img.onload = function() {
  const pattern = ctx.createPattern(img, 'repeat')
  ctx.fillStyle = pattern
  ctx.fillRect(0, 0, 200, 200)
}
img.src = 'pattern.png'

图案坐标

// 图案坐标相对于画布原点
const pattern = ctx.createPattern(patternCanvas, 'repeat')
ctx.fillStyle = pattern
// 图案从画布(0,0)开始，不是从图形位置开始
ctx.fillRect(100, 100, 100, 100)

Canvas作为图案源

// 可以使用另一个Canvas作为图案源
const patternCanvas = document.createElement('canvas')
patternCanvas.width = 20
patternCanvas.height = 20
const patternCtx = patternCanvas.getContext('2d')

// 在patternCanvas上绘制
patternCtx.fillStyle = '#3498db'
patternCtx.fillRect(0, 0, 10, 10)

// 创建图案
const pattern = ctx.createPattern(patternCanvas, 'repeat')

图案与变换

// 图案受当前变换影响
ctx.save()
ctx.translate(50, 50)
ctx.rotate(Math.PI / 4)

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

ctx.restore()