canvas点阵函数波动,类似飘带或水波
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点阵函数波动,类似飘带或水波的更多相关文章
- 使用 Canvas 实现一个类似 Google 的可视化的页面错误反馈库
使用 Canvas 实现一个类似 Google 的可视化的页面错误反馈库 iframe 嵌套 iframe iframe 包含 复制的 HTML 页面 和支持可以拖拽的工具栏 鼠标经过上面,智能识别 ...
- canvas剪裁图片并上传,前端一步到位,无需用到后端
背景: 当前主流的图片剪裁主要有两种实现方式. 1:flash操作剪裁.2:利用js和dom操作剪裁. 目前看来这个剪裁主要还是先通过前端上传图片到服务器,然后前端操作后把一些坐标和大小数据传到后台, ...
- canvas API ,通俗的canvas基础知识(一)
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
- H5canvas画类似心电图
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像,我们可以使用canvas来绘制类似心电图的东西. 效果图如下: <!DOCTYPE html> <ht ...
- canvas 2.0
了解 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的.所以,如果你想学习Canvas画图,你必须要 ...
- canvas绘制图像轮廓效果
在2d图形可视化开发中,经常要绘制对象的选中效果. 一般来说,表达对象选中可以使用边框,轮廓或者发光的效果. 发光的效果,可以使用canvas的阴影功能,比较容易实现,此处不在赘述. 绘制边框 绘制 ...
- 分享一个利用HTML5制作的海浪效果代码
在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了“海浪效果”(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif 动画分析构成:贝塞尔曲线画布 ...
- WPF整理-为控件添加自定义附加属性
附加属性 附加属性,大家都不陌生,最常见的是Canvas.Left/Canvas.Top,类似的也有Grid.Row/Grid.Column等附加属性.举个最常见的例子 <Canvas> ...
- U3D UGUI学习1 - 层级环境
就像主动碰撞检测需要刚体,刚体需要Mesh Filter.Unity的一些组件都需要基础配置. UGUI的基础配置和NGUI差不多,把NGUI的那些中间件全部削减干净,甚至连快捷键也没有. 1.基础层 ...
随机推荐
- 【题解】SOFTWARE 二分+搜索/dp
题目描述 一个软件开发公司同时要开发两个软件,并且要同时交付给用户,现在公司为了尽快完成这一任务,将每个软件划分成m个模块,由公司里的技术人员分工完成,每个技术人员完成同一软件的不同模块的所用的天数是 ...
- 一个线上 Maven 诡异问题排查过程
å. 前言 现在的大部分 Java 应用基本都是通过 Maven 进行组织的,不论是分布式应用还是单体集群应用往往都会通过一个 父 POM 加若干子 POM 完成项目的组织.然而这种多应用多模块的拆分 ...
- 7、linux快捷键
ctrl +a:切换到命令行开始 ctrl+e:切换到命令行结尾 ctrl+c:终止当前命令或脚本 ctrl+d:退出当前shell,相当于exit ctrl+l:清除当前屏幕的内容,相当于clear ...
- 95、配置ntp服务器
95.1.ntp简介: ntp服务使用的是udp的123端口,如果开启了防火墙要记得放开这个端口: NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步 ...
- layui动态创建Tab、Tab右键功能
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 & ...
- Centos 8 上定时备份Gitlab ,脚本实现定时备份,备份恢复
定时备份 要求 为了能够备份和恢复,请确保你的系统上安装了Rsync yum install rsync -y 配置备份目标机器免密认证 执行ssh-keygen -t rsa 生成私钥和公钥 ssh ...
- Java的类加载器种类
Java类加载器采用双亲委派模型: 1.启动类加载器:这个类加载器负责放在<JAVA_HOME>\lib目录中的,或者被-Xbootclasspath参数所指定的路径中的,并且是虚拟机识别 ...
- Quartz:Quartz定时代码实现
1.添加pom.xml <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId> ...
- Hibernate框架(三)框架中的关系映射
在设计数据库时我们会考虑,表与表之间的关系,例如我们前边经常提到的一对一,一对多,多对多关系,在数据库中我们通过外键,第三张表等来实现这些关系.而Hibernate时间实体类和数据库中的表进行的映射, ...
- 不同版本docker修改存储位置补充
前言:最近发现yum安装docker,安装的版本不一样,有点蛇皮,虽然存放默认位置都是/var/lib/docker,但是它的配置文件不一样,这里做个补充 对于docker版本是1.13及以下 操作如 ...