一、图片引入这里需要注意一下,不然引入不成功
在这里插入图片描述
二、通过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>
Logo

前往低代码交流专区

更多推荐