canvas动画利用函数波动特点制作水波动画

<canvas id="myCanvas" width="500" height="400" style="border:0px double #996633;"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var i=0;
setInterval(move,30);
function move(){

  ctx.clearRect(0,0,canvas.width,canvas.height);

  var dig=Math.PI/24;
  var colorArr = ['red','yellow','green','blue','purple']
  var colorIndex = 0
  for (k=0;k<=14;k++){

    for (n=0;n<=17;n++){
      colorIndex++
      if (colorIndex >= 5) {
        colorIndex = 0
      }
      ctx.fillStyle = colorArr[colorIndex]
      x0=30*n;
      y0=30*k;
      var x=24*Math.sin((i+k*2+n*3)*dig)+x0;
      var y=24*Math.cos((i+k*2+n*3)*dig)+y0;
      ctx.beginPath();
      ctx.arc(x,y,8,0,Math.PI*2,true);
      ctx.closePath();
      ctx.fill();
    }
   }

   i=i+1;
   if (i>=48) i=0;
 }

直接可复制代码查看效果

canvas点阵函数波动,类似飘带或水波的更多相关文章

  1. 使用 Canvas 实现一个类似 Google 的可视化的页面错误反馈库

    使用 Canvas 实现一个类似 Google 的可视化的页面错误反馈库 iframe 嵌套 iframe iframe 包含 复制的 HTML 页面 和支持可以拖拽的工具栏 鼠标经过上面,智能识别 ...

  2. canvas剪裁图片并上传,前端一步到位,无需用到后端

    背景: 当前主流的图片剪裁主要有两种实现方式. 1:flash操作剪裁.2:利用js和dom操作剪裁. 目前看来这个剪裁主要还是先通过前端上传图片到服务器,然后前端操作后把一些坐标和大小数据传到后台, ...

  3. canvas API ,通俗的canvas基础知识(一)

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  4. H5canvas画类似心电图

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像,我们可以使用canvas来绘制类似心电图的东西. 效果图如下: <!DOCTYPE html> <ht ...

  5. canvas 2.0

    了解 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的.所以,如果你想学习Canvas画图,你必须要 ...

  6. canvas绘制图像轮廓效果

    在2d图形可视化开发中,经常要绘制对象的选中效果. 一般来说,表达对象选中可以使用边框,轮廓或者发光的效果.  发光的效果,可以使用canvas的阴影功能,比较容易实现,此处不在赘述. 绘制边框 绘制 ...

  7. 分享一个利用HTML5制作的海浪效果代码

    在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了“海浪效果”(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif 动画分析构成:贝塞尔曲线画布 ...

  8. WPF整理-为控件添加自定义附加属性

    附加属性 附加属性,大家都不陌生,最常见的是Canvas.Left/Canvas.Top,类似的也有Grid.Row/Grid.Column等附加属性.举个最常见的例子 <Canvas> ...

  9. U3D UGUI学习1 - 层级环境

    就像主动碰撞检测需要刚体,刚体需要Mesh Filter.Unity的一些组件都需要基础配置. UGUI的基础配置和NGUI差不多,把NGUI的那些中间件全部削减干净,甚至连快捷键也没有. 1.基础层 ...

随机推荐

  1. Visual Studio 2019本地不能运行Azure Functions

    最近一个项目,需要维护同事写得代码,主要是一堆基于 .net core 3.1 的 Azure Functions.想起2年前第一次接触 Azure Functions(那次是基于.net frame ...

  2. 谷歌浏览器加载驱动(chromedriver)——selenium

    http://chromedriver.storage.googleapis.com/index.html 可以到该网站下载对应的谷歌驱动器(注意:需要版本和操作系统对应,其中windows统一32的 ...

  3. 有效Ajax案例

    <script>$(document).ready(function(){ $("input:submit").click(function(){ $.ajax({ t ...

  4. noip2009 总结

    潜伏者 原题 R 国和 S 国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动.历尽艰险后,潜伏于 S 国的 R 国间谍小 C 终于摸清了 S 国军用密码的编码规则:1. S 国军方内部欲发送的 ...

  5. Mysql优化_第十三篇(HashJoin篇)

    Mysql优化_第十三篇(HashJoin篇) 目录 Mysql优化_第十三篇(HashJoin篇) 1 适用场景 纯等值查询,不能使用索引 等值查询,使用到索引 多个join条件中至少包含一个等值查 ...

  6. redis优化小建议

    1.优化的一些小建议 1.尽量使用短的key 当然在精简的同时,不要为了key的"见名知意".对于value有些也可精简,比如性别使用0.1. 2.每个redis设置合理内存 每个 ...

  7. 详解C++中继承的基本内容

    有些类与类之间存在特殊的关系,有共性也有特性,比如动物类可以细分为猫,狗等.下级别的成员除了拥有上一级的共性,还有自己的特性,这个时候就可以考虑继承的技术,减少重复代码. 一.继承中的对象模型 1.1 ...

  8. 暑假自学java第七天

    1,Object类: 任何类的父类都是Object 任何子类的对象都可以赋值给父类的引用.任何类的所有实例都可以用Object来代替 (3条消息) java中的Object类_iqqcode-CSDN ...

  9. 苦B程序员的数据验证之路

    发生了什么事 在一次苦B程序员和苦C程序员的结对编程中发生的一段对话 代码是这样的: public void deleteAllExtendAclsFromContent(String content ...

  10. PHP常见的设计模式

    设计模式六大原则 开放封闭原则:一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 里氏替换原则:所有引用基类的地方必须能透明地使用其子类的对象. 依赖倒置原则:高层模块不应该依赖低层模块,二者 ...