无法使用fabricjs + vuejs 初始化画布（this.lowerCanvasEl.getContext 不是函数）答案

【问题标题】：Couldn't init canvas using fabricjs + vuejs (this.lowerCanvasEl.getContext is not a function)无法使用fabricjs + vuejs 初始化画布（this.lowerCanvasEl.getContext 不是函数）
【发布时间】：2018-10-02 00:09:12
【问题描述】：

我正在尝试在 vuejs 组件中初始化画布。这是一个例子：https://jsfiddle.net/eywraw8t/55338/

我在mounted钩子中初始化画布，这意味着DOM可用。我也可以看到面料明星通过制作lower-canvas div 来完成它的工作，但随后它会抛出：

this.lowerCanvasEl.getContext is not a function

无法找出问题所在。我已经在我的项目中使用了fabric，从来没有遇到过这样的错误。

【问题讨论】：

标签： javascript vue.js fabricjs

【解决方案1】：

这不是 Vue 的问题。如果你把所有的 Vue 代码拿走，问题仍然存在。

fabric 需要安装在 <canvas> 元素上，而不是 <div>。

Updated fiddle here.

演示：

new Vue({
  el: "#app",

  mounted: function() {
    new fabric.Canvas('canvas', {
      width: 500,
      height: 500
    })
  }
})

#canvas {
  width: 200px;
  height: 200px;
  background-color: green;
}

<script type="text/javascript" src="//unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>

<div id="app">
  <canvas id="canvas"></canvas>
</div>

【讨论】：

为什么我自己都没有注意到。我欠你两杯啤酒:)
哈哈哈！ ? 总是很高兴能提供帮助！ :D
有趣的是我在我的项目中已经使用了很多fabric，只是没有注意到我使用了错误的标签...也许你也知道为什么canvas无法捕捉拖放事件，@987654322 @ ?
那个小提琴上的那些听众被绑定到画布上，而不是#draggable div，是这样吗？
是的，当我将红色矩形放在画布上时，我想听，但我在 jsfiddle 和我的项目中都没有做到这一点