vue canvas 画笔矩形圆形清空画布撤销保存图片

最新推荐文章于 2025-05-07 15:17:23 发布

原创

最新推荐文章于 2025-05-07 15:17:23 发布 · 1.5k 阅读

10 ·

CC 4.0 BY-SA版权

在这里插入图片描述


<template>
  <div class="test">
    <canvas
      id="canvas"
      width="800"
      height="600"
      ref="canvas"
      @mousedown="canvasDown($event)"
      @mouseup="canvasUp($event)"
      @mousemove="canvasMove($event)"
    ></canvas>

    <img :src="signSrc" alt="" />

    <el-button type="danger" @click="penClick">画笔</el-button>
    <el-button type="danger" @click="rectangleClick">矩形</el-button>
    <el-button type="danger" @click="roundClick">圆形</el-button>
    <el-button type="danger" @click="resetCanvas">清空画布</el-button>
    <el-button type="danger" @click="revoke">撤销</el-button>
    <el-button type="danger" @click="saveImg">保存图片</el-button>
  </div>
</template>

<script>
export default {
   
   
  components: {
   
   },
  data () {
   
   
    return {
   
   
      flag: false, // 是否绘制

      // imgUrl: require('@/assets/demo.png'),
      imgUrl:
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      img: new Image(), // 背景图片缓存
      context: {
   
   }, // canvas对象
      oldX: 0, // 第一次点击X轴
      oldY: 0, // 第一次点击Y轴