我有一个 Canvas ，可以用来在上面绘图，并添加一个撤消按钮。我将 Canvas 保存在数组中(如代码中所示)，然后单击撤消按钮来调用它。 在 console.log 上，您可以看到 src 正在更改，但 Canvas 没有更改。
我做错了什么？ (第二个代码是我遇到的问题，但我添加了大部分代码，因为我的问题总是因为没有提供足够的信息而被关闭)
var mousePressed = false;
var lastX, lastY;
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
function InitThis() {
$('#myCanvas').mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$('#myCanvas').mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$('#myCanvas').mouseup(function (e) {
if (mousePressed) {
mousePressed = false;
cPush()
}
});
$('#myCanvas').mouseleave(function (e) {
if (mousePressed) {
mousePressed = false;
cPush()
}
});
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x;
lastY = y;
}
var cPushArray = [""];
var cStep = -1;
function cPush() {
cStep++;
if (cStep < cPushArray.length) { cPushArray.length = cStep; }
image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
cPushArray.push(image);
}
function cUndo() {
if (cStep > 0) {
cStep--;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function() { ctx.drawImage(canvasPic, 0, 0); };
console.log(canvasPic);
}
}
function cRedo() {
if (cStep < cPushArray.length - 1) {
cStep++;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function() { ctx.drawImage(canvasPic, 0, 0); }
}
}canvas {
border: 2px solid black;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="InitThis();">
<div>
<canvas id="myCanvas" width="500" height="200"></canvas>
<br /><br />
<button onclick="javascript:clearArea(); return false;">Clear Area</button>
Line width : <select id="selWidth">
<option value="1">1</option>
<option value="3" selected="selected">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="9">9</option>
<option value="11">11</option>
</select>
Color : <select id="selColor">
<option value="black" selected="selected">black</option>
<option value="blue">blue</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="gray">gray</option>
</select>
<button onclick="javascript:cUndo();return false;">Undo</button>
<button onclick="javascript:cRedo();return false;">Redo</button>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>最佳答案
在绘制保存的图像之前需要清除 Canvas ，撤消时...
function cUndo() {
if (cStep > 0) {
cStep--;
var canvasPic = new Image();
canvasPic.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
ctx.drawImage(canvasPic, 0, 0);
};
canvasPic.src = cPushArray[cStep];
console.log(canvasPic);
}
}
使用clearRect() 清除 Canvas 的方法。
关于javascript - 为什么 Canvas 的撤消功能不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44966877/