Question

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

虽然我无法使重置按钮起作用，但保存按钮仍可正常工作。代码段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和draw segment中尝试了它。

然后我试图从画布中删除侦听器，也许这可能是原因...虽然在我删除侦听器后使用：

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

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

Answer 1

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

另外，您需要重置touches数组（因为正在循环中绘制已保存的片段）。

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

fillRect后Canvas不会重置

1 个答案: