canvas三角函数模拟水波效果
最近项目中,ui设计了个水波效果的背景动画,然而并没有gif或svg动画,开始试着用css实现了一下,动画效果并不是很好,网上查了下基本都是用贝赛尔曲线实现,想起以看的各种前波形图,于是想着用三角函数图像初略模拟一下
示例效果如下:
一、绘制sin函数图像
sin函数表达式如下,
y=Asin(wx+φ)+h y= Asin(wx+φ)+h y=Asin(wx+φ)+h
其中A表示振幅,ω表示角频率(ω=2π/T,T为函数的周期),φ表示初相,h表示图像向y轴正方向平移的长度;(这里需要注意一下:h在数学学的本来是表示向上平移的,但在canvas中采用的是屏幕坐标系,即左上角为原点,h则表示向下平移);绘制代码如下:
(1)添加canvas标签
<canvas id="canvas"></canvas>
(2)添加css样式,设置canvas宽高
html,body { padding: 0; margin: 0; width: 100%; height: 100%;}canvas { width: 100%; height: 100%;}
(3)绘制函数图像
var canvas = document.getElementById("canvas"), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;//声明参数var A=50, W=1 / 50, Q=0, H= height / 2;//绘图方法(function draw(){ ctx.clearRect(0, 0, width, height);//清空画布 ctx.beginPath(); //开始路径 ctx.strokeStyle="#000"; //设置线条颜色 ctx.lineWidth = 1; //设置线条宽度 ctx.moveTo(0, height /2); //起始点位置
for (let x = 0; x <= width; x++) {// 绘制x对应y的 var y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) }
ctx.stroke(); //绘制路径 ctx.closePath(); //闭合路径})()
这样我们可以得到以下图像:
二、为函数图像添加动画
上面得到的是是一个静态的函数图像,而我们一般见到的的波形图或水波都是随时间连续变化的,这里就要用到上一步中的参数相位φ,(js即代码中的Q) ,我们将φ随时间不断增加或减小,即可得到不同时间的不同图像;使用window.requestAnimationFrame实现帧动画;
修改以上代码为:
var speed=-0.02;
(function draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle="#000"; ctx.lineWidth = 1; ctx.moveTo(0, height /2); Q+=speed; for (let x = 0; x <= width; x++) { var y = A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); } ctx.stroke(); ctx.closePath();})()
效果如下(渣渣截图软件):
三、绘制完整填充路径
以上路径虽有闭合,但却不满足我们需要填充的部分,直接填充效果如下:
完整填充路径应如图所示:
闭合路径后创建一个渐变颜色,作为填充颜色,代码如下:
var lingrad = ctx.createLinearGradient(0,0,width,0); lingrad.addColorStop(0, 'rgba(0,186,128,0.8)'); lingrad.addColorStop(1, 'rgba(111,224,195,1)');
(function draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle="#000"; ctx.fillStyle = lingrad; ctx.lineWidth = 1; ctx.moveTo(0, height /2); Q+=speed; for (let x = 0; x <= width; x++) { var y = A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); } ctx.lineTo(width, height); ctx.lineTo(0, height); ctx.fill(); ctx.closePath();})()
效果如下:
四、完善水波动画
1、首先可以对上面波形叠加一个频率更高的波形,使波形无规矩
var s = 0.1*Math.sin(x/150)+1;var y = A*Math.sin(W*x+Q) +H;y=y*s;
2、再添加一个相位变化不同的波形,其渐变填充与上一个渐变方向相反使其形成相互重叠的阴影效果;
并设置路径重叠效果globalCompositeOperation;
自己根据效果配置相关参数,调节波形;
完整代码如下:
var canvas = document.getElementById("canvas"), ctx = canvas.getContext('2d'), width = canvas.width = canvas.offsetWidth, height = canvas.height = canvas.offsetHeight;
var A=30, W=1 /200, Q=0, H= height / 2;
var A2=30, W2=1/300, Q2=0, H2= height / 2;
var speed=-0.01;var speed2=-0.02;
var lingrad = ctx.createLinearGradient(0,0,width,0);lingrad.addColorStop(0, 'rgba(0,186,128,0.8)');lingrad.addColorStop(1, 'rgba(111,224,195,1)');
var lingrad2 = ctx.createLinearGradient(0,0,width,0);lingrad2.addColorStop(0,'rgba(111,224,195,1)');lingrad2.addColorStop(1, 'rgba(0,186,128,0.8)');
(function draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.fillStyle = lingrad; ctx.moveTo(0, height /2); //绘制第一个波形 Q+=speed; for (let x = 0; x <= width; x++) { var s = 0.1*Math.sin(x/150)+1; var y = A*Math.sin(W*x+Q) +H; y=y*s; ctx.lineTo(x, y); } ctx.lineTo(width, height); ctx.lineTo(0, height); ctx.fill(); ctx.closePath() //设置重叠效果 ctx.globalCompositeOperation = "destination-over" //绘制第二个波形 ctx.beginPath(); ctx.fillStyle = lingrad2; Q2+=speed2; for (let x = 0; x < width; x++) { var y = A2*Math.sin(x*W2+Q2) +H2; ctx.lineTo(x, y); } ctx.lineTo(width,height); ctx.lineTo(0,height); ctx.fill() ctx.closePath();
})()
canvas三角函数模拟水波效果相关推荐
- html 水纹效果原理,canvas实现水波纹效果
本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效. 水波基本原理 首先复习一波高中物理知识. 波是指振 ...
- 用虎克定理来近似模拟水波波动效果
水波演示程序: ScreenShot 这个水波模拟程序和其它常见的算法不太一样.这是用虎克定理来近似模拟水波波动的.具体的算法如下. 我们知道,当水面是平静的是时候.也就是说水面各点处于平衡位置时候. ...
- Unity Shader-后处理:屏幕水波效果
一.简介 最近在打黑魂,被虐得死去活来,每次都是想砸电脑的节奏,然而还是忍不住想玩,唉.下面步入正题,黑魂的传送技能之前会播放一个帅帅的屏幕特效-屏幕水波,从屏幕中间向四周扩散开来,很有赶脚.下面附上 ...
- Android 水波效果 | 涟漪效果 实现
在Xml 里面实现 给Button设置一个background <Buttonandroid:text="Ripple水波纹Background"android:layout ...
- matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
- android 涟漪背景,Android 水波效果 | 涟漪效果 实现
在Xml 里面实现 给Button设置一个background ripple_background 内容如下: ripple 的Color属性,就是设置水波效果的颜色. ripple 的子节点可以设置 ...
- [UnityShader入门精要读书笔记]37.水波效果
在这里,使用一张立方体纹理(cubemap)作为环境纹理,模拟反射.为了模拟折射效果,我们使用GrabPass来获取当前屏幕的渲染纹理,并使用切线空间下的法线方向对像素的屏幕坐标进行偏移,再使用该坐标 ...
- Shader学习的基础知识( 三十一)水波效果
效果如图(移动端截图): 水波效果也可以使用噪声纹理来实现,通过作为高度图并不段改变法线方向.我们会使用时间变量来对噪声纹理进行采样,再进行反射+折射计算. 我们使用一张立方体为环境纹理,并在列线空间 ...
- 基于h5 canvas的模拟时钟javascript程序
资源下载地址:https://download.csdn.net/download/sheziqiong/85723236 资源下载地址:https://download.csdn.net/downl ...
最新文章
- 自定义input type=file 样式的方法
- iOS企业版使用第三方实现自动更新版本
- android ndk 编译c++11,Android NDK的C++11标准支持
- PHP路径realpath __FILE__ __DIR__ dirname
- 怎么用cmd关闭系统弹窗_C盘空间越来越小怎么办?5招帮你解决问题!
- NUMA架构的CPU -- 你真的用好了么?
- 横屏展示 fragment 监听面积并非全屏,部分面积监听失效
- mysql中group by的排序问题_Mysql之group by 和order by 一起用时的排序问题
- Android 系统(229)---OTA
- L3-004. 肿瘤诊断-PAT团体程序设计天梯赛GPLT(广度优先搜索)
- SQL——后台分页(C#,mysql)
- 使用C#的后端Web API:循序渐进教程
- 常见笔顺错误的字_原来这么多年,我写字的笔顺一直都是错的
- MOOC-首都师范-博弈论-焦宝聪-第六章-动态博弈学习笔记(五)
- Springboot课设旅游推荐系统
- 如何批量保存网页照片
- easyx的使用(1)
- matlab regress 非线性,MATLAB用regress作多元非线性回归
- Usdt到底靠谱吗?——记美国与大B网的恩怨情仇
- 线性代数笔记-3Blue1Brown:(一)
热门文章
- 继承2016/4/19
- MongoDB进阶系列(11)——“改”的那些事(二)文档的keyvalue为数组的修改方法...
- grep及正则表达式
- 致命错误: Python.h:没有那个文件或目录
- veeam.Backup.and.Replication 6 测试之二--backup和replication功能
- Spring Boot 2.0(五):Docker Compose + Spring Boot + Nginx + Mysql 实践
- Kafka实战-Flume到Kafka
- Servicehot和你说说运维自动化的那些事儿
- 《从问题到程序:用Python学编程和计算》——第3章 基本编程技术 3.1 循环程序设计...
- (网页的缓存控制)HTML配置no-cache(备忘) “Cache-control”常见的取值