通过函数(动画)每次重新迭代时重置画布笔划.怎样

Question

此时，线条会永久粘贴在一起，从而创建图形。我希望每次通过setInterval（）调用函数时都能绘制并重置这条线，从而创建一个类似脑电波波纹的动画。

这是我当前的源代码：

var rippleEffect = function(){
var co = []; 
for(var i=0; i<=5; i++){
var r = Math.floor(Math.random()*250); 
co.push(r); 
//each time through the loop throws/pushes 6 random numbers to array 'co' for bezier curve.
}
  var canvas = document.getElementById('brainWave');
  var context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(500, 75);
  context.bezierCurveTo(co[0], co[1], co[2], co[3], co[4], co[5]);

  context.lineWidth = 2;
  // line color
  context.strokeStyle = '#444';
  context.stroke(); //exicute the stroke based on the structions we've provided. 


};
setInterval(ripple,100); //this re-calls the functions every few miller-seconds. 

clearRect（）是解决方案的一部分吗？

Answer 1

我不太确定你想做什么，但以下是对你的代码的一些观察：

• 如果不希望图形堆积在一起，clearRect是必不可少的。

• setInterval调用的是"ripple"，但它应该调用"rippleEffect"。

• var画布和var上下文应该在rippleEffect之前拉到外部（它们只需要创建一次，而不是每个循环。

• 贝塞尔曲线的完全随机控制点产生的是意大利面条，而不是脑电波。

祝你的项目好运：）