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. 【题解】SOFTWARE 二分+搜索/dp

    题目描述 一个软件开发公司同时要开发两个软件,并且要同时交付给用户,现在公司为了尽快完成这一任务,将每个软件划分成m个模块,由公司里的技术人员分工完成,每个技术人员完成同一软件的不同模块的所用的天数是 ...

  2. 一个线上 Maven 诡异问题排查过程

    å. 前言 现在的大部分 Java 应用基本都是通过 Maven 进行组织的,不论是分布式应用还是单体集群应用往往都会通过一个 父 POM 加若干子 POM 完成项目的组织.然而这种多应用多模块的拆分 ...

  3. 7、linux快捷键

    ctrl +a:切换到命令行开始 ctrl+e:切换到命令行结尾 ctrl+c:终止当前命令或脚本 ctrl+d:退出当前shell,相当于exit ctrl+l:清除当前屏幕的内容,相当于clear ...

  4. 95、配置ntp服务器

    95.1.ntp简介: ntp服务使用的是udp的123端口,如果开启了防火墙要记得放开这个端口: NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步 ...

  5. layui动态创建Tab、Tab右键功能

      1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 & ...

  6. Centos 8 上定时备份Gitlab ,脚本实现定时备份,备份恢复

    定时备份 要求 为了能够备份和恢复,请确保你的系统上安装了Rsync yum install rsync -y 配置备份目标机器免密认证 执行ssh-keygen -t rsa 生成私钥和公钥 ssh ...

  7. Java的类加载器种类

    Java类加载器采用双亲委派模型: 1.启动类加载器:这个类加载器负责放在<JAVA_HOME>\lib目录中的,或者被-Xbootclasspath参数所指定的路径中的,并且是虚拟机识别 ...

  8. Quartz:Quartz定时代码实现

    1.添加pom.xml <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId> ...

  9. Hibernate框架(三)框架中的关系映射

    在设计数据库时我们会考虑,表与表之间的关系,例如我们前边经常提到的一对一,一对多,多对多关系,在数据库中我们通过外键,第三张表等来实现这些关系.而Hibernate时间实体类和数据库中的表进行的映射, ...

  10. 不同版本docker修改存储位置补充

    前言:最近发现yum安装docker,安装的版本不一样,有点蛇皮,虽然存放默认位置都是/var/lib/docker,但是它的配置文件不一样,这里做个补充 对于docker版本是1.13及以下 操作如 ...