如何删除HTML5 canvas中的特定笔画？

Question

我在 HTML5 canvas 中画了几笔。为了用笔触制作动画，我像这样清除了以前的：

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

如何删除HTML5 canvas中的特定笔画？

How to remove a specific stroke in HTML5 canvas?

html5-canvas

stroke