如何在画布上执行撤消功能？

Question

我有一个画布HTML5绘图板。

我想创建一个具有撤消功能的按钮。

我该怎么做？

我的想法是拥有一个数组堆栈。 每当您绘制并释放鼠标时，它都会通过推送将画布图像保存到撤消数组堆栈中。 但是，当我尝试过时，它实际上并没有工作...还有更好的主意吗？

先感谢您！

var canvas = document.getElementById('paint');
var ctx = canvas.getContext('2d');
var sketch = document.getElementById('sketch');
var sketch_style = getComputedStyle(sketch);

var mouse = {x: 0, y: 0};

canvas.addEventListener('mousemove', function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);

ctx.lineJoin = 'round';
ctx.lineCap = 'round';

ctx.strokeStyle = "red";
function getColor(colour){ctx.strokeStyle = colour;}

function getSize(size){ctx.lineWidth = size;}

canvas.addEventListener('mousedown', function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);

canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};   

Answer 1

这就是我要做的：

主要思想是：在mouseup我将最后绘制的路径保存在数组中。 单击撤消按钮时，将从路径数组中删除最后一条路径。 我将删除所有内容，然后在paths数组中绘制所有路径。

我使用的是一开始是假的可变drawing 。 当我单击画布上的drawing为真。 在mouseup drawing是错误的。 只有在drawing == true我才能绘图。

 const canvas = document.getElementById('paint'); const ctx = canvas.getContext('2d'); canvas.width = 600; canvas.height=200; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.strokeStyle = "red"; let drawing = false; let pathsry = []; let points = []; var mouse = {x: 0, y: 0}; var previous = {x: 0, y: 0}; canvas.addEventListener('mousedown', function(e) { drawing = true; previous = {x:mouse.x,y:mouse.y}; mouse = oMousePos(canvas, e); points = []; points.push({x:mouse.x,y:mouse.y}) }); canvas.addEventListener('mousemove', function(e) { if(drawing){ previous = {x:mouse.x,y:mouse.y}; mouse = oMousePos(canvas, e); // saving the points in the points array points.push({x:mouse.x,y:mouse.y}) // drawing a line from the previous point to the current point ctx.beginPath(); ctx.moveTo(previous.x,previous.y); ctx.lineTo(mouse.x,mouse.y); ctx.stroke(); } }, false); canvas.addEventListener('mouseup', function() { drawing=false; // Adding the path to the array or the paths pathsry.push(points); }, false); undo.addEventListener("click",Undo); function drawPaths(){ // delete everything ctx.clearRect(0,0,canvas.width,canvas.height); // draw all the paths in the paths array pathsry.forEach(path=>{ ctx.beginPath(); ctx.moveTo(path[0].x,path[0].y); for(let i = 1; i < path.length; i++){ ctx.lineTo(path[i].x,path[i].y); } ctx.stroke(); }) } function Undo(){ // remove the last path from the paths array pathsry.splice(-1,1); // draw all the paths in the paths array drawPaths(); } // a function to detect the mouse position function oMousePos(canvas, evt) { var ClientRect = canvas.getBoundingClientRect(); return { //objeto x: Math.round(evt.clientX - ClientRect.left), y: Math.round(evt.clientY - ClientRect.top) } } 

 canvas{border:1px solid} 

 <button id="undo">undo</button><br> <canvas id="paint"></canvas>