html 流动效果,html5 canvas流动的海浪特效
特效描述:html5canvas 流动的海浪特效。html5 canvas流动的海浪特效
代码结构
1. 引入JS
2. HTML代码
'use strict';
var gui = new dat.GUI(),
guiSet = {
frequency: 10,
reset: function reset() {
$.reset();
}
};
gui.add(guiSet, 'frequency').min(10).max(50);
gui.add(guiSet, 'reset');
//
var $ = {};
/*========================================
Utility
========================================*/
$.PI = Math.PI;
$.TAU = $.PI * 2;
$.rand = function (min, max) {
if (!max) {
var max = min;
min = 0;
}
return Math.random() * (max - min) + min;
};
/*========================================
Initialize
========================================*/
$.init = function () {
$.c = document.querySelector('canvas');
$.ctx = $.c.getContext('2d');
$.simplex = new SimplexNoise();
$.events();
$.reset();
$.loop();
};
/*========================================
Reset
========================================*/
$.reset = function () {
$.w = window.innerWidth;
$.h = window.innerHeight;
$.cx = $.w / 2;
$.cy = $.h / 2;
$.c.width = $.w;
$.c.height = $.h;
$.count = Math.floor($.w / guiSet.frequency); // Wave frequency
$.xoff = 0;
$.xinc = 0.05;
$.yoff = 0;
$.yinc = 0.01; // Speed
$.goff = 0;
$.ginc = 0;
$.y = $.h * 0.65;
$.length = $.w + 0;
$.amp = 15; // Wave height
};
/*========================================
Event
========================================*/
$.events = function () {
window.addEventListener('resize', $.reset.bind(undefined));
};
/*========================================
Wave
========================================*/
$.wave = function (color, amp, height, comp) {
$.ctx.beginPath();
var sway = $.simplex.noise2D($.goff, 0) * amp;
for (var i = 0; i <= $.count; i++) {
$.xoff += $.xinc;
var x = $.cx - $.length / 2 + $.length / $.count * i;
var y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;
$.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
}
$.ctx.lineTo($.w, -$.h); // -$.h - Vertically reflection
$.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection
$.ctx.closePath();
$.ctx.fillStyle = color;
if (comp) {
$.ctx.globalCompositeOperation = comp;
}
$.ctx.fill();
};
/*========================================
Loop
========================================*/
$.loop = function () {
requestAnimationFrame($.loop);
$.ctx.clearRect(0, 0, $.w, $.h);
$.xoff = 0;
$.ctx.fillStyle = "#182645";
$.ctx.fillRect(0, 0, $.w, $.h);
$.wave("#fb0000", 20, $.h * .5, "screen");
$.wave("#00ff8e", 20, $.h * .5, "screen");
$.wave("#6F33FF", 20, $.h * .5, "screen");
$.ctx.fillStyle = "#f1dfdd";
$.ctx.globalCompositeOperation = "darken";
$.ctx.fillRect(0, 0, $.w, $.h);
$.yoff += $.yinc;
$.goff += $.ginc;
};
/*========================================
Start
========================================*/
$.init();
html 流动效果,html5 canvas流动的海浪特效相关推荐
- html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
- html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
- html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
- html5刮彩效果,HTML5 Canvas炫酷彩虹色波浪线动画特效代码
效果图 JS源码 var c = document.querySelector('.c') , w , h , ctx = c.getContext('2d') , x0, y0, x, y, t = ...
- HTML5 Canvas爱心表白动画特效
代码自用自取,复制粘贴直接使用,喜欢的话可以查看博主其它文章,贡献一丢丢的浏览量,感激不尽. 先看一下效果 <!doctype html> <html> <head> ...
- 手机特效html,支持移动手机的HTML5 Canvas刮刮卡特效
这是一款支持移动手机的HTML5 Canvas刮刮卡特效.该刮刮卡特效通过Canvas来前后两张图片的刮卡效果,支持桌面端和移动端. 使用方法 HTML结构 使用 元素来制作刮卡. ...... CS ...
- html银河特效编码,html5 canvas银河星系动画特效
特效描述:html5 canvas 银河星系动画特效.html5 canvas绘制闪闪发光移动的银河星系背景动画特效.(上传服务器正常演示,本地无法直接预览) 代码结构 1. 引入JS 2. HTML ...
- html5 运动轨迹绘画,html5 canvas行星运动轨迹动画特效
特效描述:html5 canvas 行星运动 轨迹动画特效.html5运动轨迹,行星动画特效 代码结构 1. 引入JS 2. HTML代码 Your browser doesn't support c ...
- html5给页面添加树叶特效,html5 canvas树叶光标动画特效
特效描述:html5 canvas树叶 光标动画特效.html5 canvas虚幻的树叶光标动画. 代码结构 1. 引入JS 2. HTML代码 // Hold mouse down to enter ...
最新文章
- 机器学习算法易受攻击?阿里“安全基建”这样应对AI的不安全
- Struts 2的文件上传
- SecureCRT下的串口不能输入
- DTC精彩回顾—韩锋:AnalyticDB,金融级云原生数据仓库及最佳实践丨PPT视频
- ReiBoot Pro for Mac(iOS系统修复软件)
- 《Pyhton语言程序设计》_第7章_对象和类
- susue linux防火墙,在64位的SUSUE下,g++编译的代码中,进入函数前的一段汇编让人费解,请高手解释一下?...
- 黑书计算机组成与设计,计算机组成与设计
- php 调用speex解码库,android 用speex做回音消除
- Alice and the List of Presents CodeForces - 1236B 数学推导
- 解决“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”
- 游戏服务器——中心服
- 神经网络(深度学习)入门学习
- libev中ev_loop结构体中宏定义的理解
- 计算机控制系统第二章答案,计算机控制系统习题参考答案--第2章
- 微信公众号开发--获取用户信息中文乱码的解决方案
- 免费使用office365和5TOneDrive空间
- IDL实现火灾监测与火点提取
- (三)基于Multisim的超外差接收系统:中频放大器的设计
- 基于javaweb+mysql的网上图书商城网上书店(java+SSM+Jsp+MySQL+Redis+JWT+Shiro+RabbitMQ+EasyUI)