首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >重新设置画布笔画每一次通过功能(动画)的迭代。多么?

重新设置画布笔画每一次通过功能(动画)的迭代。多么?
EN

Stack Overflow用户
提问于 2013-11-26 16:44:41
回答 1查看 68关注 0票数 0

此刻,线条永久地粘在一起,形成了一幅画。我希望每次通过setInterval()调用该函数时,都要绘制和重置这条线,从而创建一个类似于动画的脑波波纹。

下面是我当前的源代码:

代码语言:javascript
运行
复制
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()是解决方案的一部分吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-11-26 18:07:18

我不太清楚您想要做什么,但是下面是对您的代码的一些观察:

  • 如果你不想让图纸堆积在一起,那么clearRect是必不可少的。
  • setInterval称其为“波纹”,但它应该称之为"rippleEffect“。
  • var画布和var上下文应该在rippleEffect之前从外部提取(它们只需要创建一次,而不是每个循环。
  • Bezier曲线的完全随机控制点会产生意大利面,而不是脑电波。

祝你的项目好运:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20222954

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档