uni-app开发canvas绘图画画，记录每一步画的信息， 并实现后退功能

在uni-app中，要实现canvas绘图并记录每一步的信息以实现后退功能，你需要做几件事：

1. 初始化Canvas上下文：首先，你需要在页面加载时初始化canvas上下文。

2. 记录绘图步骤：在绘图过程中，你需要记录每一步的详细信息，如路径的坐标点、颜色、线宽等。

3. 实现后退逻辑：当用户点击后退按钮时，你需要从记录的步骤中移除最后一步，并重新绘制剩余的步骤。

小程序体验地址：

下面是一个简化的示例代码，展示了如何实现这些功能：

vue复制代码

	<template>
	<view>
	<canvas canvas-id="drawCanvas" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" style="width: 100%; height: 300px;"></canvas>
	<button @click="undo">撤销</button>
	</view>
	</template>
	<script>
	export default {
	data() {
	return {
	ctx: null, // canvas上下文
	steps: [], // 绘图步骤数组
	currentPath: { // 当前正在绘制的路径信息
	points: [],
	color: '#000000',
	lineWidth: 2,
	},
	};
	},
	methods: {
	// 初始化canvas上下文
	initCanvas() {
	this.ctx = uni.createCanvasContext('drawCanvas');
	},
	// 开始绘图
	touchStart(e) {
	this.currentPath.points = []; // 清空当前路径的点
	this.currentPath.points.push({ x: e.touches[0].x, y: e.touches[0].y }); // 添加起点
	},
	// 绘制路径
	touchMove(e) {
	this.currentPath.points.push({ x: e.touches[0].x, y: e.touches[0].y }); // 添加新的点
	this.drawCurrentPath(); // 绘制当前路径
	},
	// 结束绘图并保存步骤
	touchend() {
	if (this.currentPath.points.length > 1) {
	this.steps.push({ ...this.currentPath }); // 保存当前路径为一步
	}
	this.currentPath.points = []; // 清空当前路径的点，为下一次绘图做准备
	this.drawSteps(); // 重新绘制所有步骤
	},
	// 绘制当前路径
	drawCurrentPath() {
	this.ctx.beginPath();
	this.ctx.moveTo(this.currentPath.points[0].x, this.currentPath.points[0].y);
	this.currentPath.points.forEach((point) => {
	this.ctx.lineTo(point.x, point.y);
	});
	this.ctx.setStrokeStyle(this.currentPath.color);
	this.ctx.setLineWidth(this.currentPath.lineWidth);
	this.ctx.stroke();
	this.ctx.draw(true); // 立即绘制，不清除之前的内容
	},
	// 绘制所有步骤
	drawSteps() {
	this.ctx.clearRect(0, 0, this.ctx.width, this.ctx.height); // 清除画布
	this.steps.forEach((step) => {
	this.ctx.beginPath();
	this.ctx.moveTo(step.points[0].x, step.points[0].y);
	step.points.forEach((point) => {
	this.ctx.lineTo(point.x, point.y);
	});
	this.ctx.setStrokeStyle(step.color);
	this.ctx.setLineWidth(step.lineWidth);
	this.ctx.stroke();
	});
	this.ctx.draw(true); // 立即绘制，不清除之前的内容
	},
	// 撤销最后一步
	undo() {
	if (this.steps.length > 0) {
	this.steps.pop(); // 移除最后一步
	this.drawSteps(); // 重新绘制剩余步骤
	}
	},
	// 页面加载时初始化
	onLoad() {
	this.initCanvas();
	},
	},
	};
	</script>
	<style>
	/* 这里可以添加一些样式 */
	</style>

在这个示例中：

• initCanvas 方法在页面加载时初始化canvas上下文。
• touchStart, touchMove, 和 touchend 方法分别处理用户触摸开始、移动和结束的事件，用于绘制路径

欢迎加入“前端组件开发学习”交流群，一起学习成长！可关注  “前端组件开发” 公众号后，私信后申请入群。