画布在填充矩形后不会重置

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段中尝试过。

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

//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
}