主要功能
- 前进（下一步）
- 后退（上一步）
- 保存画布
- 清空画布
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas绘图</title>
<style>
body {
overflow: hidden;
}
canvas {
border: 1px solid #000;
}
button {
margin-right: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<hr>
<button id="undoBtn">上一步</button>
<button id="redoBtn">下一步</button>
<button id="save">保存</button>
<button id="empty">清空</button>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var lastX, lastY;
var isDrawing = false;
var undoStack = [];
var redoStack = [];
canvas.width = window.innerWidth - 10;
// canvas.height = window.innerHeight - 10;
canvas.height = 500;
canvas.addEventListener('touchstart', function (e) {
lastX = e.touches[0].clientX - canvas.offsetLeft;
lastY = e.touches[0].clientY - canvas.offsetTop;
isDrawing = true;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
});
canvas.addEventListener('touchmove', function (e) {
if (isDrawing) {
var currentX = e.touches[0].clientX - canvas.offsetLeft;
var currentY = e.touches[0].clientY - canvas.offsetTop;
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.lineTo(currentX, currentY);
ctx.stroke();
lastX = currentX;
lastY = currentY;
}
});
canvas.addEventListener('touchend', function (e) {
isDrawing = false;
saveState();
});
function saveState() {
var state = canvas.toDataURL();
undoStack.push(state);
clearRedoStack();
}
function clearRedoStack() {
redoStack = [];
}
document.getElementById('undoBtn').addEventListener('click', function () {
if (undoStack.length > 0) {
redoStack.push(undoStack.pop());
var state = undoStack[undoStack.length - 1];
if (state) {
var img = new Image();
img.src = state;
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
};
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
});
document.getElementById('redoBtn').addEventListener('click', function () {
if (redoStack.length > 0) {
var state = redoStack.pop();
var img = new Image();
img.src = state;
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
undoStack.push(state);
};
}
localStorage.setItem('imgs', JSON.stringify(undoStack))
});
document.getElementById('empty').addEventListener('click', function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
localStorage.removeItem('imgs');
})
document.getElementById('save').addEventListener('click', function () {
localStorage.setItem('imgs', JSON.stringify(undoStack))
})
// 保存的数据回显
function renderPath() {
var arr = JSON.parse(localStorage.getItem('imgs'));
if (arr && arr.length > 0) {
for (var i = 0; i < arr.length; i++) {
var img = new Image();
img.src = arr[i];
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
};
}
}
}
renderPath();
</script>
</body>
</html>
