html5 实现波浪效果图,利用HTML5实现Canvas流动的波浪特效
特效描述:利用HTML5实现 Canvas 流动的 波浪特效。利用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();
html5 实现波浪效果图,利用HTML5实现Canvas流动的波浪特效相关推荐
- html 流动效果,html5 canvas流动的海浪特效
特效描述:html5canvas 流动的海浪特效.html5 canvas流动的海浪特效 代码结构 1. 引入JS 2. HTML代码 'use strict'; var gui = new dat. ...
- html霓虹灯效果图,利用HTML5实现Canvas霓虹灯蜂巢特效
特效描述:利用HTML5实现 Canvas 霓虹灯 蜂巢特效.利用HTML5实现Canvas霓虹灯蜂巢特效 代码结构 1. HTML代码 /* because me lazy */ Object.ge ...
- html 闪电的动态效果图,利用HTML5实现Canvas空中闪电动画特效
特效描述:利用HTML5实现 Canvas 空中闪电 动画特效.利用HTML5实现Canvas空中闪电动画特效 代码结构 1. 引入JS 2. HTML代码 /*=================== ...
- html5 照片汇聚logo,利用HTML5实现Canvas粒子汇聚文字特效
特效描述:利用HTML5实现 Canvas 粒子汇聚 文字特效.利用HTML5实现Canvas粒子汇聚文字特效 代码结构 1. HTML代码 jQuery Chinaz // WRITTEN BY T ...
- html5绘制节点链接,利用HTML5实现网状结构节点动画特效
特效描述:利用HTML5实现 网状结构 节点动画特效.利用HTML5实现网状结构节点动画特效 代码结构 1. HTML代码 (function() { var canvas, ctx, circ, n ...
- html5网站粒子时钟,利用HTML5实现SVG多边形粒子时钟动画特效
特效描述:利用HTML5实现 SVG 多边形 粒子时钟 动画特效.利用HTML5实现SVG多边形粒子时钟动画特效 代码结构 1. 引入JS 2. HTML代码 svg { position: ab ...
- html5 海浪,分享一个利用HTML5制作的海浪效果代码
在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了"海浪效果"(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif动画分析 ...
- html5 游戏制作教程,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
- html5 手机随机抽奖,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
1 2 3 4 5 6 摇一摇抽奖 7 8 html,body{width:100%;height:100%;background-color:#000;margin:0;overflow:hidde ...
最新文章
- Python搭建Keras CNN模型破解网站验证码
- stm8s串口奇偶校验学习笔记
- C++ reinterpret_cast,const_cast等 显式类型转换总结
- 打破系统边界,云端协同创新——专访华为云视频架构师 黄挺
- PhoneGap API帮助文档翻译—Camera (摄像头)
- python期末设计作品_期末作品检查
- 使用Spring Integration聚合异步结果
- java:Map借口及其子类HashMap五,identityHashMap子类
- 7、IPsec 实验
- 用python刷微信投票_微信投票知道 微信刷票能否python抓取微信投票_大师网络投票刷票网...
- JQuery监听页面滚动总结
- 80386 Programmer's Manual: Chapter 9 Exceptions and Interrupts(Personal Translation)
- 【案例】用 turtle 绘制一个月饼
- 新闻传播专业的本科毕业论文,有哪些比较好的选题?
- Android USB HID整理
- 小程序开发:完整发布上线流程
- Debian修改时区
- 一文了解CPU及芯片硬件技术发展
- 仿凡科,微企点建站功能预览
- 科比球衣退役仪式和演讲6分钟全回顾(中文字幕)