Javascript 如何使html画布具有撤消和重做功能?
首先,对不起,我的英语很差。 我在应用程序中执行重做和撤消功能时遇到问题。。我已经阅读了其他的问题和答案,但未能应用到我的项目中。我最近试图遵循的答案是一个 我的html代码Javascript 如何使html画布具有撤消和重做功能?,javascript,html,canvas,undo,redo,Javascript,Html,Canvas,Undo,Redo,首先,对不起,我的英语很差。 我在应用程序中执行重做和撤消功能时遇到问题。。我已经阅读了其他的问题和答案,但未能应用到我的项目中。我最近试图遵循的答案是一个 我的html代码 <th><img src="images/undo.png" onclick="undoLastPoint()"></th> <th><img src="images/redo.png" onclick="()"></th> 不知道为什么我的html
<th><img src="images/undo.png" onclick="undoLastPoint()"></th>
<th><img src="images/redo.png" onclick="()"></th>
不知道为什么我的html代码没有显示:(我制作了图像按钮..你读过:@marcel.js这篇文章在顶部提到过吗question@marcel.js是的。这是我在正文中链接的内容。我试图遵循这一点,但失败:(…无论如何,谢谢你没有向
点
数组添加任何内容。。
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var isDrawing=false;
function pencil () {
canvas.onmousedown = function(e) {
var pos = getMousePos(canvas, e);
isDrawing = true;
ctx.moveTo(pos.x, pos.y);
};
canvas.onmousemove = function(e) {
var pos = getMousePos(canvas, e);
if (isDrawing) {
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
}
};
canvas.onmouseup = function() {
isDrawing = false;
};
}
function undoLastPoint() {
// remove the last drawn point from the drawing array
var lastPoint=points.pop();
// add the "undone" point to a separate redo array
redoStack.unshift(lastPoint);
// redraw all the remaining points
redrawAll();
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}