h5 canvas 撤销
时间: 2023-06-29 10:11:23 浏览: 50
实现 canvas 的撤销操作可以利用栈的数据结构来存储每一步的绘制操作,然后在进行撤销时弹出栈顶元素,重新绘制画布。以下是一个简单的示例代码:
```html
<canvas id="myCanvas" width="500" height="500"></canvas>
<button onclick="undo()">撤销</button>
```
```javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var undoStack = [];
// 绘制线条
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
// 监听鼠标事件
canvas.addEventListener('mousedown', function(e) {
var startX = e.offsetX;
var startY = e.offsetY;
canvas.addEventListener('mousemove', onMouseMove);
// 鼠标弹起时,将当前绘制操作存入栈
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onMouseMove);
undoStack.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
});
function onMouseMove(e) {
var endX = e.offsetX;
var endY = e.offsetY;
drawLine(startX, startY, endX, endY);
startX = endX;
startY = endY;
}
});
// 撤销操作
function undo() {
if (undoStack.length > 0) {
// 弹出栈顶元素
undoStack.pop();
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重新绘制
if (undoStack.length > 0) {
ctx.putImageData(undoStack[undoStack.length - 1], 0, 0);
}
}
}
```
在这个示例中,我们使用了 `getImageData()` 方法将当前画布的像素数据存储到栈中,在撤销操作时,我们从栈中弹出栈顶元素,并使用 `putImageData()` 方法重新绘制画布。需要注意的是,当栈为空时不能进行撤销操作。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)