canvas动画，线条被重复绘制该如何解决

画之前要调beginPath清除下路径

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.strokeStyle = "RGBA(255,0,0,.1)"
##context.beginPath()
var point = [
[5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
[-2, -2, -7, -2, -7, -1, -6, -3, -6, -7, -6, -8, -0, -0, -1, -0, -5, -8, -5, -4, -6]
]
var k = 0
var f = setInterval(function() {
if (k > 20) {
context.stroke()
## clearInterval(f)
} else {
## context.moveTo((point[0][k] - 5) * 20, point[1][k] * -26)
## context.lineTo((point[0][k+1] - 5) * 20, point[1][k+1] * -26)
}
k++
}, 0)
});

的确是被重绘了，加##的地方是要注意的地方。