javascript - fillRect 之后 Canvas 不会重置

Question

我正在创建一个带有保存和重置按钮的 Canvas 。 Canvas 支持自由绘制，可签名。

虽然我无法让重置按钮工作，但保存按钮可以工作。代码片段 HTML:

<div>
    <canvas id="theCanvas" width="300" height="150" style="-ms-touch-action: none; border: solid 1px #999"></canvas>
    <div class="btn-group">
        <button onclick="resetCanvas();" class="btn btn-danger">Reset</button>
        <button onclick="saveCanvas();" class="btn btn-primary">Opslaan</button>
    </div>    
</div>

JavaScript 代码片段:

var canvas, topmenu, context, touches = [], isWriting = false, lastContactPoint, currentTouchId;
var requestAnimFrame = window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (callback) {
      window.setTimeout(callback, 1000 / 60);
  };

function draw() {
    if (context) {
        context.fillStyle = '#FFF';
        context.fillRect(0, 0, canvas.width, canvas.height);
        var i;
        for (i = 0; i < touches.length; i++) {
            drawSegment(touches[i]);
        }
    }
    requestAnimFrame(draw);
}

function drawSegment(segment) {
    var i, firstTouch = true;
    context.beginPath();
    for (i = 0; i < segment.length; i++) {
        var touch = segment[i];
        if (firstTouch) {
            firstTouch = false;
            context.beginPath();
            context.moveTo(touch.x, touch.y);
            continue;
        }
        context.lineTo(touch.x, touch.y);
    }

    context.strokeStyle = '#000';
    context.lineWidth = 3;
    context.stroke();
    context.closePath();
}

function addTouch(position) {
    var touchArray = touches[touches.length - 1];
    touchArray.push(position);
}

requestAnimFrame(function () {
    draw();
});

function load() {
    topmenu = document.getElementsByClassName("navbar-fixed-top")[0]
    canvas = document.getElementById('theCanvas');
    context = canvas.getContext('2d');
    canvas.addEventListener('touchstart', function (evt) {
        evt.preventDefault();
        currentTouchId = evt.touches[0].identifier;
        touches.push([]);
        position = getPositionFromTarget(evt.touches[0], evt.touches[0].target);
        addTouch(position);
    });
    canvas.addEventListener('touchmove', function (evt) {
        evt.preventDefault();
        var i, position;
        for (i = 0; i < evt.changedTouches.length; i++) {
            if (evt.changedTouches[i].identifier !== currentTouchId)
                continue;
            position = getPositionFromTarget(evt.changedTouches[i], evt.changedTouches[i].target);
            addTouch(position);
        }
    });
    if (window.navigator.msPointerEnabled) {
        canvas.addEventListener('MSPointerDown', function (evt) {
            if (currentTouchId)
                return;
            currentTouchId = evt.pointerId;
            touches.push([]);
            var position = getPositionFromTarget(evt, evt.target);
            addTouch(position);
        });
        canvas.addEventListener('MSPointerMove', function (evt) {
            if (evt.pointerId !== currentTouchId)
                return;
            var position = getPositionFromTarget(evt, evt.target);
            addTouch(position);
        });
        canvas.addEventListener('MSPointerUp', function (evt) {
            currentTouchId = undefined;
        });
    }
    else {
        canvas.addEventListener('mousedown', function (evt) {
            var position = getPositionFromTarget(evt, evt.target);
            touches.push([]);
            addTouch(position);
            isWriting = true;
        });
        canvas.addEventListener('mousemove', function (evt) {
            if (isWriting) {
                var position = getPositionFromTarget(evt, evt.target);
                addTouch(position);
            }
        });
        canvas.addEventListener('mouseup', function (evt) {
            var position = getPositionFromTarget(evt, evt.target);
            addTouch(position);
            isWriting = false;
        });
    }
}

function getPositionFromTarget(evt, target) {
    return {
        y: evt.pageY - (target.offsetTop + (topmenu.clientHeight - 3)),
        x: evt.pageX - target.offsetLeft
    };
}

window.addEventListener('load', load); 

function resetCanvas() { 
    context.beginPath();
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.closePath();
}

我已经阅读了一些使用 beginPath 和 closePath 的解决方案，并在函数 resetCanvas 和绘制段中尝试了它。

然后我尝试从 Canvas 中删除监听器，也许这可能是原因......尽管在我使用以下方法删除监听器之后:

//var new_element = canvas.cloneNode(true);
//canvas.parentNode.replaceChild(new_element, canvas);

我无法再画画了，我错过了什么？

Answer 1

不要绘制白色矩形，而是使用 clearRect() 清除/重置 Canvas 的方法。

此外，您还需要重置 touches 数组(因为保存的段是在循环中绘制的)。

function resetCanvas() {
    touches = []; //reset 'touches' array
    context.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
}