0
私はそれに描画するために使用することができるキャンバスを持って、私は元に戻すボタンを追加します。キャンバスを（コードのように）配列に保存しています。私は、キャンバスをアンドゥボタンをクリックして呼び出しています。 console.logに がありますが、srcは変更されていますがキャンバスは変更されていないことがわかります。なぜキャンバスの取り消しが機能しないのですか？
私は間違っていますか？あなたはキャンバスをクリアする必要があり （第2のコードは、私はとの問題を抱えていますが、私の質問は、常に十分な情報を与えていないため閉鎖得るので、私はコードのほとんどを追加したものです）
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>
可能であれば、デバッグに役立つjsfiddle を作成してください。 –