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>
相关推荐
逐·風25 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果3 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询