vue 详细了解canvas（1）--展示图片，鼠标在画布上点哪出现字

一、图片引入这里需要注意一下，不然引入不成功

二、通过id拿到canvas,通过 getContext(‘2d’)方法获取2D绘制上下文， this.context.drawImage(img,x,y,width,height)方法可以来展示图片， img: 图片 x,y相对于canvas的左上角，其实位置（0,0） wisth：图片的宽 height:图片的高

三、鼠标按下的位置出现字，首先我们要拿到鼠标坐标的位置e.offsetX, e.offsetY，鼠标自带的参数可以自己去找。
canvas给我们提供了fillText（text,x,y） 方法 text:填写我们想说的话 ， x,y同上面一样填写 。 fillStyle修改字体的颜色。font修改字体的大小

效果图

<template>
    <div>
        <canvas
            id="canvas"
            ref="canvas"
            width="800"
            height="600"
            @mousedown="canvasDown($event)"
            @mouseup="canvasUp($event)"
            @mousemove="canvasMove($event)"
        ></canvas>
        <img src="../../../assets/img/523.jpg" alt />
    </div>
</template>

<script>
import imgurl from '../../../assets/img/523.jpg'
export default {
  data() {
    return {
      img: new Image(), // 背景图片缓存
      context: {}, // canvas对象
    }
  },
  mounted() {
    this.initDraw()
  },
  methods: {
    initDraw() {
      this.img.src = imgurl
      const canvas = document.querySelector('#canvas')
      this.context = canvas.getContext('2d')

      let w = this.img.width * 600 / this.img.height
      let h = this.img.height * 800 / this.img.width
      console.log(w, h)
      canvas.width = w
      canvas.heigth = h
      setTimeout(() => {
        console.log(this.img.width * 600 / this.img.height)
        this.context.drawImage(this.img, 0, 0, w, h) //在画布上定位图像
      }, 10)
    },
    canvasDown(e) {
      console.log("按下")
      this.context.font = "20px '微软雅黑'";
      this.context.fillStyle = "red"
      this.context.fillText("画布", e.offsetX, e.offsetY)
    },
    canvasMove(e) {
      console.log("移动")
    },
    canvasUp(e) {
      console.log("抬起")
    },
    resetCanvas() { // 清空画布
      this.context.fillStyle = '#fff'
      this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
      this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
      this.context.fillStyle = '#000'
    },

  }
}
</script>

<style>
#canvas {
    border: 1px solid;
}
</style>