問題還原：
1. 在畫布中畫3橫，
2. 點擊 undo，撤銷后變為 2橫
3. 繼續畫多一橫，發現第一步的第三橫也顯示了出來....
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>draw line with mouse...</title>
<style>
body {
margin: 0px;
}
#mycanvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="400" height="400"></canvas>
<div>
<button onclick="undo()">undo..</button>
<button onclick="clear1()">clear1..</button>
<button onclick="gen()">generate image..</button>
</div>
<img id="myimg" src="https://tse1-mm.cn.bing.net/th/id/OET.aff5113a1cac49dab33ba0cb5e6ad12c?w=272&h=272&c=7&rs=1&o=5&pid=1.9" alt="myimg" width="200" height="200">
<img id="myimg2" src="https://tse1-mm.cn.bing.net/th/id/OET.aff5113a1cac49dab33ba0cb5e6ad12c?w=272&h=272&c=7&rs=1&o=5&pid=1.9" alt="myimg" width="200" height="200">
<script>
let ctx = mycanvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 400, 400);
let history = [mycanvas.toDataURL()]; //默認白板
//ctx.translate(mycanvas.width/2, mycanvas.height/2);
ctx.beginPath();
let startX = null;
let startY = null;
let endX = null;
let endY = null;
mycanvas.onmousedown = function(e) {
if(!startX && !startY) {
startX = e.pageX;
startY = e.pageY;
ctx.moveTo(startX, startY);
}
console.log('startXY', startX, startY);
}
mycanvas.onmousemove = function(e) {
if(!startX && !startY) {
return;
}
console.log('...move')
endX = e.pageX;
endY = e.pageY;
//console.log(endX, endY);
ctx.lineTo(endX, endY);
ctx.stroke();
}
mycanvas.onmouseup = function(e) {
console.log('endXY', endX, endY);
history.push(mycanvas.toDataURL());
console.log(history)
startX = null;
startY = null;
endX = null;
endY = null;
}
function clear1() {
ctx.clearRect(0, 0, 400, 400)
}
function undo() {
if(history.length === 1) //只剩下默認白板...
return;
history.pop();
let lastImg = new Image();
lastImg.src = history[history.length - 1];
myimg.src = lastImg.src;
lastImg.onload = function() {
ctx.drawImage(lastImg, 0, 0, 400, 400);
}
}
function gen() {
console.log('--gen---')
myimg2.src = mycanvas.toDataURL();
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/7558.html
標籤：JavaScript
上一篇：發一個問題到論壇里
下一篇：導航欄顯示跟隱藏