canvas实现的画板功能

本文链接： https://blog.csdn.net/qq_40816649/article/details/102467219

闲来无事正好团队准备做一个画板相关的项目，虽然我不在其中但是对这个画板还是蛮有兴趣的。
主要是通过canvas这个标签加上鼠标的一些相关事件来实现的。
中间有碰到过一个bug
canvas的画板大小不能通过css来设置，css会缩放大小导致获取到的点坐标是正确的但是在canvas上显示的位置确是有偏差的
这里的解决办法是直接在canvas标签上的width和height设置长和宽。

<template>
  <div class="canvas">
    <button @click="resetCanvas">清空canvas</button>
    <canvas width="500px" height="300px" ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: "canvas",
  components: {},
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let canvas = this.$refs.canvas
      let ctx = canvas.getContext("2d")
      let startPosition = []
      let isdraw = false
      ctx.fillStyle = "#999999"
      ctx.fillRect(0, 0, 500, 300)
      ctx.lineWidth = 1
      canvas.onmousedown = res => {
        //指针在canvas上点击
        isdraw = true;
        startPosition[0] = res.offsetX
        startPosition[1] = res.offsetY
        drawLine(res.offsetX,res.offsetY)
        console.log(res)
      };
      canvas.onmouseup = res => {
        //指针在canvas上放开
        if (!isdraw) return;
        clear()
      };
      canvas.onmouseout = res => {
        //指针移出canvas
        if (!isdraw) return;
        clear()
      };
      canvas.onmousemove = res => {
        //指针在canvas移动
        if (!isdraw) return;
        drawLine(res.offsetX,res.offsetY)
      };
      function drawLine(X,Y) {
        //画图
        if (!isdraw) return;
        ctx.beginPath();
        console.log(X,Y)
        ctx.moveTo(startPosition[0],startPosition[1])
        startPosition = [X,Y]
        ctx.lineTo(X,Y);
        ctx.stroke();
        ctx.save()
      }
      function clear() {
        isdraw = false;
        startPosition = []
      }
    },
    resetCanvas() {
      //清空canvas
      let canvas = this.$refs.canvas
      let ctx = canvas.getContext("2d")
      let startPosition = []
      let isdraw = false
      ctx.fillStyle = "#999999"
      ctx.fillRect(0, 0, 500, 300)
    }
  }
};
</script>
<style lang='scss' scoped>
canvas {
  
}
</style>

哈哈字有点丑~~~但是问题不大！！！

canvas实现的画板功能

猜你喜欢