canvas绘画线条

<template>
  <canvas
    ref="canvas"
    :width="width"
    :height="height"
    @mousedown="startDraw"
    @mousemove="draw"
    @mouseup="endDraw"
    @mouseleave="endDraw"
  ></canvas>
  <div class="canvasButton">
    <a-button @click="save" type="primary">保存</a-button>
    <a-button @click="clear" style="margin-left: 15px;" danger>清除</a-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Button as AButton, } from "ant-design-vue"

const canvas = ref(null);
const ctx = ref(null);
const isDrawing = ref(false);
const width = 650;
const height = 360;

const startDraw = (event) => {
  isDrawing.value = true;
  const rect = canvas.value.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  ctx.value.beginPath();
  ctx.value.moveTo(x, y);
};

const draw = (event) => {
  if (!isDrawing.value) return;
  const rect = canvas.value.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  ctx.value.lineTo(x, y);
  ctx.value.stroke();
};

const endDraw = () => {
  isDrawing.value = false;
};

onMounted(() => {
  ctx.value = canvas.value.getContext('2d');
});

const clear = () => {
  ctx.value.clearRect(0, 0, width, height);
}
const save = () => {
  // console.log(canvas.value.toDataURL('image/png'))
  let imgBase64 = canvas.value.toDataURL('image/png')
  console.log(imgBase64)
}
</script>

<style scoped>
canvas {
  /* border: 1px solid #000; */
  touch-action: none;
}

.canvasButton {
  display: flex;

}
</style>

canvas融合

<template>
  <canvas
    ref="canvas"
    :width="width"
    :height="height"
    @mousedown="startDraw"
    @mousemove="draw"
    @mouseup="endDraw"
    @mouseleave="endDraw"
    style="background: none;"
  ></canvas>
  <canvas
     ref="canvas1"
    :width="width"
    :height="height" style="display: none; pointer-events: none;position: absolute;"></canvas>
  <div class="canvasButton">
    <a-button @click="save" type="primary">保存</a-button>
    <a-button @click="makeImg" type="primary">生成图片</a-button>
    <a-button @click="clear" style="margin-left: 0px;" danger>清除</a-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Button as AButton, } from "ant-design-vue"

const canvas = ref(null);
const canvas1 = ref(null);
const ctx = ref(null);
const ctx1 = ref(null);
const isDrawing = ref(false);
const width = 650;
const height = 360;

const emits =  defineEmits(['generateBase64'])

const startDraw = (event) => {
  isDrawing.value = true;
  const rect = canvas.value.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;;
  ctx.value.beginPath();
  ctx.value.lineWidth = 20;
  ctx.value.strokeStyle="#fff";
  ctx.value.moveTo(x, y);
};

const draw = (event) => {
  if (!isDrawing.value) return;
  const rect = canvas.value.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  ctx.value.lineTo(x, y);
  ctx.value.stroke();
};

const endDraw = () => {
  isDrawing.value = false;
};

onMounted(() => {
  ctx.value = canvas.value.getContext('2d');

  ctx1.value = canvas1.value.getContext('2d');
  ctx1.value.fillStyle = "rgba(0, 0, 0, 1)"
  ctx1.value.fillRect(0, 0, width, height);
});

const clear = () => {
  ctx.value.clearRect(0, 0, width, height);
}
const save = () => {
  let canvasMerged = document.createElement('canvas');
  canvasMerged.width = 650;
  canvasMerged.height = 360;
  let ctxMerged = canvasMerged.getContext('2d');
  ctxMerged.drawImage(canvas1.value, 0, 0, width, height);
  ctxMerged.drawImage(canvas.value, 0, 0, width, height);
  console.log(ctxMerged.canvas.toDataURL('image/png'))
  emits('generateBase64', ctxMerged.canvas.toDataURL('image/png'))

  // let imgBase64 = canvas.value.toDataURL('image/png')
  // console.log(imgBase64)
  // emits('generateBase64', imgBase64)
}

const makeImg = () => {
  let canvasMerged = document.createElement('canvas');
  canvasMerged.width = 650;
  canvasMerged.height = 360;
  let ctxMerged = canvasMerged.getContext('2d');
  ctxMerged.drawImage(canvas1.value, 0, 0, width, height);
  ctxMerged.drawImage(canvas.value, 0, 0, width, height);
  var link = document.createElement('a');
  link.href = ctxMerged.canvas.toDataURL('image/png');
  link.download = "download.png";
  link.click();
}



defineExpose({
  save
});
</script>

<style scoped>
canvas {
  /* border: 1px solid #000; */
  touch-action: none;
  background: none;
}

.canvasButton {
  display: flex;

}
</style>