Fabric.js 图案画笔(笔刷)

<canvas id="c" style="border: 1px solid #ccc;"></canvas>

<script>
  const canvas = new fabric.Canvas('c', {
    width: 400,
    height: 400,
    isDrawingMode: true // 1. 开启绘图模式
  })
  
  // 2. 创建并加载图片
  let img = new Image();
  img.src = './bubble.jpg'
  
  // 必须等图片加载完再进行下一步操作
  img.onload = function() {
    // 3. 创建图案画笔
    let texturePatternBrush = new fabric.PatternBrush(canvas)
    // 4. 设置图案画笔的 `source` 指向图片
    texturePatternBrush.source = img
    // 5. 使用图案画笔
    canvas.freeDrawingBrush = texturePatternBrush
  }
</script>

// 省略部分代码
img.onload = function(oImg) {
  let texturePatternBrush = new fabric.PatternBrush(canvas)
  texturePatternBrush.source = img
  texturePatternBrush.width = 50 // 设置画笔大小
  canvas.freeDrawingBrush = texturePatternBrush
}