先看一下效果图吧

Gitee地址

代码组成：画笔大小、颜色、工具按钮都是组件，通俗易懂，可以按照自己的需求调整。

主要代码App.vue

<code><template>

<div class="page">code>

<div class="main">code>

<div id="canvas_panel">code>

<canvas id="canvas" :style="{ backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }">当前浏览器不支持canvas。</canvas>code>

</div>

</div>

<div class="footer">code>

<BrushSize :size="brushSize" @change-size="onChangeSize" />code>

<ColorPicker :color="brushColor" @change-color="onChangeColor" />code>

<ToolBtns :tool="brushTool" @change-tool="onChangeTool" />code>

</div>

</div>

</template>

<script setup>

import { ref, onMounted } from 'vue';

import BrushSize from './components/BrushSize.vue';

import ColorPicker from './components/ColorPicker.vue';

import ToolBtns from './components/ToolBtns.vue';

let canvas = null;

let context = null;

let painting = false;

const historyData = []; // 存储历史数据，用于撤销

const brushSize = ref(5); // 笔刷大小

const brushColor = ref('#000000'); // 笔刷颜色

const brushTool = ref('brush');

// canvas相对于（0, 0）的偏移，用于计算鼠标相对于canvas的坐标

const canvasOffset = {

left: 0,

top: 0,

};

const backgroundImage = ref('https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF'); // 默认背景图为空

function changeBackground(imgUrl) {

backgroundImage.value = imgUrl;

}

function initCanvas() {

function resetCanvas() {

const elPanel = document.getElementById('canvas_panel');

canvas.width = elPanel.clientWidth;

canvas.height = elPanel.clientHeight;

context = canvas.getContext('2d', { willReadFrequently: true }); // 添加这一行

context.fillStyle = 'white';

context.fillRect(0, 0, canvas.width, canvas.height);

context.fillStyle = 'black';

getCanvasOffset(); // 更新画布位置

}

resetCanvas();

window.addEventListener('resize', resetCanvas);

}

// 获取canvas的偏移值

function getCanvasOffset() {

const rect = canvas.getBoundingClientRect();

canvasOffset.left = rect.left * (canvas.width / rect.width); // 兼容缩放场景

canvasOffset.top = rect.top * (canvas.height / rect.height);

}

// 计算当前鼠标相对于canvas的坐标

function calcRelativeCoordinate(x, y) {

return {

x: x - canvasOffset.left,

y: y - canvasOffset.top,

};

}

function downCallback(event) {

// 先保存之前的数据，用于撤销时恢复（绘制前保存，不是绘制后再保存）

const data = context.getImageData(0, 0, canvas.width, canvas.height);

saveData(data);

const { clientX, clientY } = event;

const { x, y } = calcRelativeCoordinate(clientX, clientY);

context.beginPath();

context.moveTo(x, y);

context.lineWidth = brushSize.value;

context.strokeStyle = brushTool.value === 'eraser' ? '#FFFFFF' : brushColor.value;

painting = true;

}

function moveCallback(event) {

if (!painting) {

return;

}

const { clientX, clientY } = event;

const { x, y } = calcRelativeCoordinate(clientX, clientY);

context.lineTo(x, y);

context.stroke();

}

function closePaint() {

painting = false;

}

function updateCanvasOffset() {

getCanvasOffset(); // 重新计算画布的偏移值

}

onMounted(() => {

canvas = document.getElementById('canvas');

if (canvas.getContext) {

context = canvas.getContext('2d', { willReadFrequently: true });

initCanvas();

// window.addEventListener('resize', updateCanvasPosition);

window.addEventListener('scroll', updateCanvasOffset); // 添加滚动条滚动事件监听器

getCanvasOffset();

context.lineGap = 'round';

context.lineJoin = 'round';

canvas.addEventListener('mousedown', downCallback);

canvas.addEventListener('mousemove', moveCallback);

canvas.addEventListener('mouseup', closePaint);

canvas.addEventListener('mouseleave', closePaint);

}

toolClear()

});

function onChangeSize(size) {

brushSize.value = size;

}

function onChangeColor(color) {

brushColor.value = color;

}

function onChangeTool(tool) {

brushTool.value = tool;

switch (tool) {

case 'clear':

toolClear();

break;

case 'undo':

toolUndo();

break;

case 'save':

toolSave();

break;

}

}

function toolClear() {

context.clearRect(0, 0, canvas.width, canvas.height);

resetToolActive();

}

function toolSave() {

const imageDataUrl = canvas.toDataURL('image/png');

console.log(imageDataUrl)

// const imgUrl = canvas.toDataURL('image/png');

// const el = document.createElement('a');

// el.setAttribute('href', imgUrl);

// el.setAttribute('target', '_blank');

// el.setAttribute('download', `graffiti-${Date.now()}`);

// document.body.appendChild(el);

// el.click();

// document.body.removeChild(el);

// resetToolActive();

}

function toolUndo() {

if (historyData.length <= 0) {

resetToolActive();

return;

}

const lastIndex = historyData.length - 1;

context.putImageData(historyData[lastIndex], 0, 0);

historyData.pop();

resetToolActive();

}

// 存储数据

function saveData(data) {

historyData.length >= 50 && historyData.shift(); // 设置储存上限为50步

historyData.push(data);

}

// 清除、撤销、保存状态不需要保持，操作完后恢复笔刷状态

function resetToolActive() {

setTimeout(() => {

brushTool.value = 'brush';

}, 1000);

}

</script>

<style scoped>

.page {

display: flex;

flex-direction: column;

width: 1038px;

height: 866px;

}

.main {

flex: 1;

}

.footer {

display: flex;

justify-content: space-around;

align-items: center;

height: 88px;

background-color: #fff;

}

#canvas_panel {

margin: 12px;

height: calc(100% - 24px);

/* 消除空格影响 */

font-size: 0;

background-color: #fff;

box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

}

#canvas {

cursor: crosshair;

/* background: url('https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF') no-repeat !important; */

}

</style>

接下来就是三个组件