使用fabric.js在canvas上自由绘图
我正在尝试使用fabric.js在canvas上绘制一个免费的绘图，但我无法在我这边自由绘制像喷雾，圆圈，纹理模式我使用此代码只有铅笔模式绘图工作，但当我选择喷雾和模式绘制为铅笔的其他模式。
这是我的HTML 这里是小提琴墨水
Pencil Circle Spray Pattern hline vline square diamond texture
这是我的脚本代码
var canvas = new fabric.Canvas('canvas') var drawingModeEl = document.getElementById('drawing-mode'), drawingOptionsEl = document.getElementById('drawing-mode-options'), drawingColorEl = document.getElementById('drawing-color'), drawingLineWidthEl = document.getElementById('drawing-line-width'), drawingShadowWidth = document.getElementById('drawing-shadow-width'); drawingModeEl.onclick = function() { canvas.isDrawingMode = !canvas.isDrawingMode; if (canvas.isDrawingMode) { drawingModeEl.innerHTML = 'Cancel drawing mode'; drawingOptionsEl.style.display = ''; } else { drawingModeEl.innerHTML = 'Enter drawing mode'; drawingOptionsEl.style.display = 'none'; } }; canvas.on('path:created', function() { updateComplexity(); }); if (fabric.PatternBrush) { var vLinePatternBrush = new fabric.PatternBrush(canvas); vLinePatternBrush.getPatternSrc = function() { var patternCanvas = fabric.document.createElement('canvas'); patternCanvas.width = patternCanvas.height = 10; var ctx = patternCanvas.getContext('2d'); ctx.strokeStyle = this.color; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(0, 5); ctx.lineTo(10, 5); ctx.closePath(); ctx.stroke(); return patternCanvas; }; var hLinePatternBrush = new fabric.PatternBrush(canvas); hLinePatternBrush.getPatternSrc = function() { var patternCanvas = fabric.document.createElement('canvas'); patternCanvas.width = patternCanvas.height = 10; var ctx = patternCanvas.getContext('2d'); ctx.strokeStyle = this.color; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(5, 0); ctx.lineTo(5, 10); ctx.closePath(); ctx.stroke(); return patternCanvas; }; var squarePatternBrush = new fabric.PatternBrush(canvas); squarePatternBrush.getPatternSrc = function() { var squareWidth = 10, squareDistance = 2; var patternCanvas = fabric.document.createElement('canvas'); patternCanvas.width = patternCanvas.height = squareWidth + squareDistance; var ctx = patternCanvas.getContext('2d'); ctx.fillStyle = this.color; ctx.fillRect(0, 0, squareWidth, squareWidth); return patternCanvas; }; var diamondPatternBrush = new fabric.PatternBrush(canvas); diamondPatternBrush.getPatternSrc = function() { var squareWidth = 10, squareDistance = 5; var patternCanvas = fabric.document.createElement('canvas'); var rect = new fabric.Rect({ width: squareWidth, height: squareWidth, angle: 45, fill: this.color }); var canvasWidth = rect.getBoundingRectWidth(); patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance; rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 }); var ctx = patternCanvas.getContext('2d'); rect.render(ctx); return patternCanvas; }; var img = new Image(); img.src = '../assets/honey_im_subtle.png'; var texturePatternBrush = new fabric.PatternBrush(canvas); texturePatternBrush.source = img; } $('#drawing-mode-selector').on('change', function() { if (this.value === 'hline') { canvas.freeDrawingBrush = vLinePatternBrush; } else if (this.value === 'vline') { canvas.freeDrawingBrush = hLinePatternBrush; } else if (this.value === 'square') { canvas.freeDrawingBrush = squarePatternBrush; } else if (this.value === 'diamond') { canvas.freeDrawingBrush = diamondPatternBrush; } else if (this.value === 'texture') { canvas.freeDrawingBrush = texturePatternBrush; } else { canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas); } if (canvas.freeDrawingBrush) { canvas.freeDrawingBrush.color = drawingColorEl.value; canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1; canvas.freeDrawingBrush.shadowBlur = parseInt(drawingShadowWidth.value, 10) || 0; } }); drawingColorEl.onchange = function() { canvas.freeDrawingBrush.color = drawingColorEl.value; }; drawingLineWidthEl.onchange = function() { canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1; }; drawingShadowWidth.onchange = function() { canvas.freeDrawingBrush.shadowBlur = parseInt(drawingShadowWidth.value, 10) || 0; }; if (canvas.freeDrawingBrush) { canvas.freeDrawingBrush.color = drawingColorEl.value; canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1; canvas.freeDrawingBrush.shadowBlur = 0; } var canvas = new fabric.Canvas('c'); document.getElementById('canvas-background-picker').onchange = function() { canvas.backgroundColor = this.value; canvas.renderAll(); }; //end free drawing
在这里看到一个完整的截图，我选择了模式vline，但它绘制像简单的铅笔 
我已经更新了你的jsfiddle，现在它可以运行Demo 。
在你的页面上有问题 – 看看你的开发者控制台：
$('#drawing-mode-selector').on('change', function() { //Uncaught TypeError: Object [object Object] has no method 'on'
Interesting Posts