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>
相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1236 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj8 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss