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.基础层 ...
随机推荐
- .Net Core with 微服务 - Consul 注册中心
上一次我们介绍了 Ocelot 网关的基本用法.这次我们开始介绍服务注册发现组件 Consul 的简单使用方法. 服务注册发现 首先先让我们回顾下服务注册发现的概念. 在实施微服务之后,我们的调用都变 ...
- 【模板】Tarjian求LCA
概念 公共祖先,就是两个节点在这棵树上深度最大的公共的祖先节点 举个例子吧,如下图所示4和5的最近公共祖先是2,5和3的最近公共祖先是1,2和1的最近公共祖先是1. 算法 常用的求LCA的算法有:Ta ...
- sql循环说明
while循环:主要是判断,不能使用表中的ID,临时表是ID自增的,通过自增ID可以查出表ID(语法简单,需要配合其他代码操作表ID)游标循环:可以使用表中的ID ,进行修改等操作(语法难一点,核心代 ...
- 浅析uniapp
前端跨平台框架 之uniapp入门浅析 技术的发展总日新月异,处在风口,前端技术的发展尤为迅速,跨平台的概念也在前端流行起来.从最早期PhoneGap.lonic.Cordova,到近年来的Reac ...
- 时光卷轴,Microsoft大事记
Our mission is to empower every person and every organization on the planet to achieve more. 2021年6月 ...
- xf浅谈_最短路
最短路问题(short-path problem):最短路问题是图论研究中的一个经典算法问题,指在寻找图(由结点和路径组成的)中两结点之间的最短路径.算法具体的形式包括: 1.确定起点的最短路径问题 ...
- 明明是企业管理软件,CRM系统为何被抵触?
小编在昨天的文章<CRM系统为什么没有达到预期效果?>中曾说过,CRM客户管理系统没有达到预期效果的其中一个原因是CRM系统的使用率太低,而根本的原因是员工的抵触.明明是企业管理大师,CR ...
- 在线CRM系统对企业的好处有哪些
随着信息技术的飞速发展,每个企业都希望通过互联网技术来让自身发展壮大.由于强大的管理能力和技术手段,在线CRM系统成为了企业用来管理自身获得发展的最佳选择.那么在线CRM系统对企业来说有哪些好处呢?本 ...
- docker下创建redis cluster集群
概述 在Redis中,集群的解决方案有三种 主从复制 哨兵机制 Cluster Redis Cluster是Redis的分布式解决方案,在 3.0 版本正式推出. 准备工作 1.确定本机IP地址 2. ...
- Nginx:Nginx日志切割方法
Nginx的日志文件是没有切割(rotate)功能的,但是我们可以写一个脚本来自动切割日志文件. 首先我们要注意两点: 1.切割的日志文件是不重名的,所以需要我们自定义名称,一般就是时间日期做文件名. ...