Почему я не могу получить доступ к html canvas в vue?

Question

Я пытаюсь создать элемент canvas в vue. У меня проблемы с экземпляром canvas. Я считаю, что я не декларирую или не использую это должным образом. Я получаю следующую ошибку:

Ошибка типа: невозможно установить для свойства 'linewidth' значение null в VueComponent.draw (HelloWorld. vue? 140d: 55)

Как могу ли я получить доступ к

Моему шаблону:

  <div id="app">
    <canvas
      v-on:mousedown="startPainting()"
      v-on:mouseup="finishedPainting()"
      v-on:mousemove="draw()"
      id="canvas"
    ></canvas>
  </div>

Моему js

<script>
export default {
  name: "HelloWorld",

  data: () => ({
    canvas: null,
    ctx: null,
    message: "Henlo vue!",
    vueCanvas: null,
    painting: false
  }),

  mounted() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    this.vueCanvas = ctx;
  },

  methods: {
    startPainting: function() {
      this.painting = true;
      console.log(this.painting);
    },
    finishedPainting: function() {
      this.painting = false;
      console.log(this.painting);
    },
    draw: function(e) {
      if (this.painting) {
        console.log("henlo painting!");
        this.ctx.linewidth = 10;
        this.ctx.lineCap = "round";
        this.ctx.linTo(e.clientX, e.clientY);
        this.ctx.stroke();
      }
    }
  }
};
</script>

Answer 1

Немного проблем здесь:

• На самом деле lineWidth, а не linewidth.
• Вы используете this.ctx, но ctx установлено на this.vueCanvas = ctx. Таким образом, вам нужно использовать this.vueCanvas.
• На самом деле lineTo, а не this.ctx.linTo.
• Вы используете draw: function(e), но не передали событие в шаблоне. , Вы должны сначала передать его как v-on:mousemove="draw($event)".

Рабочая демонстрация:

new Vue({
  el: "#myApp",
  data: () => ({
    canvas: null,
    ctx: null,
    message: "Hello Vue!",
    vueCanvas: null,
    painting: false
  }),

  mounted() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    this.vueCanvas = ctx;
  },

  methods: {
    startPainting: function() {
      this.painting = true;
      //console.log(this.painting);
    },
    finishedPainting: function() {
      this.painting = false;
      //console.log(this.painting);
    },
    draw: function(e) {
      if (this.painting) {
        //console.log("henlo painting!");
        this.vueCanvas.lineWidth = 10;
        this.vueCanvas.lineCap = "round";
        this.vueCanvas.lineTo(e.clientX, e.clientY);
        this.vueCanvas.stroke();
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <canvas
      v-on:mousedown="startPainting()"
      v-on:mouseup="finishedPainting()"
      v-on:mousemove="draw($event)"
      id="canvas" width="600" height="250" style="border:1px solid #d3d3d3;"
    ></canvas>
</div>