Question

我有一个画布，我可以使用它绘制它，我添加一个撤消按钮。我将画布保存在一个数组中（如在代码中），我调用它点击撤消按钮。在console.log上你可以看到src正在改变，但画布不是。

我做错了什么？（第二个代码是我遇到的问题，但我添加了大部分代码，因为我的问题总是因为没有提供足够的信息而被关闭）

＆＃13;

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); }
    }
}

＆＃13;

canvas {
    
    border: 2px solid black;
    
}

＆＃13;

<!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>

＆＃13;

Answer 1

在撤消时，您需要在绘制已保存的图像之前清除画布...

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() 方法清除画布。

为什么撤消画布不起作用？

1 个答案: