如何在HTML5画布中删除特定的笔画?

Question

我在HTML5画布上画了几笔。为了制作带有描边的动画，我像这样清除前面的:

// Notice : canvasWidth, canvasHeight, context are in a parent scope
function echoLine( posLeftX, posLeftY, posRightX, posRightY) {
context.beginPath();
context.moveTo(posLeftX, posLeftY);
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.bezierCurveTo(posLeftX, posLeftY, posRightX, posLeftY, posRightX, posRightY);
context.stroke();
context.closePath();
}

我的问题是当我想做几条动画线时，context.clearRect()将删除所有，我没有找到其他方法来删除特定的笔画。

是否有一种方法可以清除特定的笔画而不需要变通，或者我应该通过笔画来创建上下文?

Answer 1

你可以保留一个线条数组，并每次绘制它们，然后删除是数组上的一个简单的splice，你只需要稍微改变你的绘制函数来清除然后循环数组，这是我们做所有绘图的地方。

下面是一个例子。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")
var lines = []
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
lines.forEach((e, i) => {
context.beginPath();
context.moveTo(e.left.x, e.left.y);    
context.fillText(i, e.left.x-7, e.left.y);
context.bezierCurveTo(e.left.x, e.left.y, e.right.x, e.left.y, e.right.x, e.right.y);
context.stroke();
})
}
function animate() {
lines.forEach((e) => { 
if (e.right.y > 150 || e.right.y < 0) e.speed *= -1 
e.right.y += e.speed      
})
draw()
}
document.getElementById('todelete').onkeyup = (event) => {
if (event.keyCode == 13) {
lines.splice(event.srcElement.value, 1)
event.srcElement.value = ""
}
};
for (var i = 2; i < 8; i++) {
lines.push({ 
left:  { x:10,   y:130 - i*16 }, 
right: { x:i*30, y:50 - i*6 }, 
speed: 0.2 + Math.random() 
})
}
setInterval(animate, 40)

input {
width: 160px
}

<input id="todelete" type="number"  min="0" max="5" placeholder="enter number to delete" >
Press enter to submit.
<br>
<canvas id="canvas" width=300 height=150></canvas>