<template>
  <div style="width: 600px;height: 400px;border: 1px solid #e1e1e1;position: relative;">
    <Draw ref="drawRef" style="height: 100%;width: 100%;"></Draw>
    <div style="position: absolute;bottom: 0px;">
      <div style="display: flex;align-items: center;">
        <div>画笔尺寸：</div>
        <input type="text" v-model="formData.size" @input="changeSize" style="width: 50px;height: 20px;">
        <button @click="clean" style="margin-left: 10px;">清空</button>
        <button @click="revoke" style="margin-left: 10px;">撤销</button>
        <button @click="drag" style="margin-left: 10px;">移动画布</button>
        
      </div>
      <div style="margin-top: 20px;">
        <button @click="setColor('red')">红色</button>
        <button @click="setColor('black')" style="margin-left: 10px;">黑色</button>
        <button @click="setColor('blue')" style="margin-left: 10px;">蓝色</button>
        <button @click="fullScreen" style="margin-left: 10px;">全屏</button>
        <button @click="saveImage" style="margin-left: 10px;">保存图片</button>
      </div>
    </div>
  </div>
</template>

script

import { ref,reactive,onMounted } from "vue"
import { Draw } from 'vue3-draw';

const drawRef = ref()

const formData = reactive({size:2})

onMounted(()=>{
  drawRef.value.initData()
})

// 清空画布
function clean(){
  drawRef.value.cleanCanvas()
}

// 撤回上一步
function revoke(){
  drawRef.value.revoke()
}

// 设置画笔粗细
function changeSize(e:any){
  drawRef.value.setSize(Number(e.target.value))
}

// 移动画布
function drag(e:any){
  drawRef.value.setDrag()
}

// 设置颜色
function setColor(v:string){
  drawRef.value.setColor(v)
}

// 全屏
function fullScreen(){
  drawRef.value.fullScreen()
}

// 保存图片
function saveImage(){
  drawRef.value.saveImage({name:"123"},(data:any)=>{
    console.log(data);
  })
}

也可以自定义canvas

import { ref,reactive,onMounted } from "vue"
import { useDraw } from 'vue3-draw';

const {
  canvasRef,
  initData,
  cleanCanvas,
  revoke,
  setSize,
  setDrag,
  setColor,
  saveImage,
  fullScreen
 } = useDraw()

 // canvas 需要有宽高的div容器！！！