html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效。html5基于canvas绘制波涛汹涌的粒子波浪动画。
代码结构
1. HTML代码
'use strict';
var FastRandom = function()
{
this.getNextFloat = function()
{
return Math.random();
};
};
var ParticleWave = function()
{
var me = this;
var config = {
colors : {
background : 0x000000,
particle : 0x477cc2
},
alpha : {
particle : 1
},
particleCount : 30000
};
var TAU = Math.PI * 2;
var random = new FastRandom();
var particle;
var particleFillStyle;
var particleColorRGB = new Float32Array(3);
var smoothGradient;
var waterGradient;
var canvas;
var engine;
var width;
var height;
var particleWaveWalker = 0;
var randomWalker = 0;
var requestTick = function()
{
window.requestAnimationFrame(tick);
};
var initParticle = function()
{
particle = new Float32Array(config.particleCount * 2);
eachParticle(function(x, z) {
particle[x] = random.getNextFloat();
particle[z] = random.getNextFloat();
});
};
var initCanvas = function()
{
var cs = document.getElementsByTagName('canvas');
canvas = cs[0];
engine = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
};
var initParticleColor = function()
{
particleColorRGB[0] = config.colors.particle >> 16 & 0xff;
particleColorRGB[1] = config.colors.particle >> 8 & 0xff;
particleColorRGB[2] = config.colors.particle & 0xff;
particleFillStyle = 'rgb(' + particleColorRGB[0] + ',' + particleColorRGB[1] + ',' + particleColorRGB[2] + ')';
};
var initSmoothGradient = function()
{
smoothGradient = engine.createLinearGradient(
width / 2,
0,
width / 2,
height
);
smoothGradient.addColorStop(0.25, 'rgba(0, 0, 0, 0)');
smoothGradient.addColorStop(0.45, 'rgba(0, 0, 0, 0.9)');
smoothGradient.addColorStop(0.5 , 'rgba(0, 0, 0, 1)');
smoothGradient.addColorStop(0.55, 'rgba(0, 0, 0, 0.9)');
smoothGradient.addColorStop(0.75, 'rgba(0, 0, 0, 0)');
};
var initWaterGradient = function()
{
waterGradient = engine.createLinearGradient(
width / 2,
height / 2,
width / 2,
height
);
waterGradient.addColorStop(0, 'rgba(0, 0, 30, 0)');
waterGradient.addColorStop(1, 'rgba(30, 0, 60, 0.5)');
};
var init = function()
{
initCanvas();
initParticle();
initParticleColor();
initSmoothGradient();
initWaterGradient();
};
var eachParticle = function(cb)
{
for (var i = 0; i < particle.length; i += 2) {
cb(i, i + 1);
}
};
var renderParticle = function()
{
randomWalker += (Math.random() - 0.5) * 0.1;
particleWaveWalker += 0.03;
var radius = {
min : 1,
add : 5
};
var midY = height / 2;
var midX = width / 2;
var spreadX = 5;
var spreadZ = 0.0;
var modZ = 0.0;
var addX = 0;
var addY = 0;
var p = {
x : 0.0,
y : 0.0,
r : 0.0
};
engine.fillStyle = particleFillStyle;
// engine.beginPath();
var waveControl = 10;
for (var i = 0, xIndex, zIndex; i < particle.length; i += 2) {
xIndex = i;
zIndex = i + 1;
particle[zIndex] += 0.003;
if (particle[zIndex] > 1) {
particle[zIndex] = 0;
particle[xIndex] = random.getNextFloat();
}
if (particle[zIndex] < 0.3) {
continue;
}
modZ = Math.pow(particle[zIndex], 2);
spreadZ = 1 + (spreadX - 1) * modZ;
//bottom
addX = (0.5 - particle[xIndex]) * width * spreadZ;
addY = midY * modZ * (1 + 3 / waveControl);
p.x = midX + addX;
p.y = midY + addY;
p.r = radius.min + modZ * radius.add;
p.y += Math.sin(particle[xIndex] * 50 + particleWaveWalker) * addY / waveControl;
p.y += Math.cos(particle[zIndex] * 10 + particleWaveWalker) * addY / waveControl;
p.y -= Math.cos(particle[zIndex] + particle[xIndex] * 10 + particleWaveWalker) * addY / waveControl;
p.y -= Math.cos(particle[xIndex] * 50 + particleWaveWalker) * addY / waveControl;
p.y -= Math.sin(particle[zIndex] * 10 + particleWaveWalker) * addY / waveControl;
if (p.x < 0 || p.x > width) {
continue;
}
engine.fillRect(p.x, p.y, p.r, p.r);
// engine.moveTo(p.x, p.y);
// engine.arc(p.x, p.y, p.r, 0, TAU);
//top
// p.y = height - p.y;
//
// engine.moveTo(p.x, p.y);
// engine.arc(p.x, p.y, p.r, 0, TAU);
}
engine.fillStyle = particleFillStyle;
// engine.closePath();
// engine.fill();
};
var colorIntToHexString = function(color)
{
var s = color.toString(16);
return '0'.repeat(6 - s.length) + s;
};
var clear = function()
{
engine.fillStyle = '#' + colorIntToHexString(config.colors.background);
engine.fillRect(0, 0, width, height);
};
var drawSmooth = function()
{
engine.fillStyle = smoothGradient;
engine.fillRect(0, 0, width, height);
};
var drawWater = function()
{
engine.fillStyle = waterGradient;
engine.fillRect(0, height / 2, width, height / 2);
};
var tick = function()
{
clear();
drawWater();
renderParticle();
drawSmooth();
requestTick();
};
this.run = function()
{
init();
tick();
};
};
var pw = new ParticleWave();
pw.run();
html5波浪效果,html5 canvas粒子波浪动画特效相关推荐
- android 漩涡动画,html5 canvas酷炫的粒子漩涡动画特效
特效描述:html5 canvas 粒子漩涡 动画特效.html5粒子漩涡动画,酷炫的粒子动画特效 代码结构 1. HTML代码 function project3D(x,y,z,vars){ var ...
- html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
- 九、HTML5空间粒子背景动画特效
文章目录 九.HTML5空间粒子背景动画特效 9.1 图片预览 9.2 index.html代码 9.3 index.js代码 9.4 gameCanvas-3.0.js代码 九.HTML5空间粒子背 ...
- HTML5 Canvas爱心表白动画特效
代码自用自取,复制粘贴直接使用,喜欢的话可以查看博主其它文章,贡献一丢丢的浏览量,感激不尽. 先看一下效果 <!doctype html> <html> <head> ...
- 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实现SVG多边形粒子时钟动画特效
特效描述:利用HTML5实现 SVG 多边形 粒子时钟 动画特效.利用HTML5实现SVG多边形粒子时钟动画特效 代码结构 1. 引入JS 2. HTML代码 svg { position: ab ...
- html5给页面添加树叶特效,html5 canvas树叶光标动画特效
特效描述:html5 canvas树叶 光标动画特效.html5 canvas虚幻的树叶光标动画. 代码结构 1. 引入JS 2. HTML代码 // Hold mouse down to enter ...
- html5绘制草,利用html5实现canvas海底水草动画特效
特效描述:利用html5实现 canvas海底水草动画特效.利用html5实现canvas海底水草动画特效 代码结构 1. HTML代码 var canvas, ctx, width, height, ...
最新文章
- 青岛大学计算机系住哪个校区,青岛大学有几个校区及校区地址
- 中国科学院、东南大学等联合发表最新的视觉 Transformer 综述
- linux sftp远程连接命令
- 为什么要叫python-为什么我要学习python?
- SAP CRM读取产品主数据360度数据的API
- CSS隐藏元素的十四种方法
- 【转】spring之任务调度
- python怎么实现deepcopy_deepcopy和python-避免使用的提示?
- Java并发包-原子类
- 网络安全学习第14篇 - 游戏(仙剑奇侠传95)外挂之修改游戏资源文件(修改人物属性)
- 计算机二进制编码原理,计算机组成原理--二进制编码
- vue大屏项目开发框架dataV
- JAVA + 百度地图API 应用
- linux系统下,python 调用终端禁用鼠标键盘
- Android Activity onDestroy() 不回调的解决方式
- 基于视觉的扫地机器人导航系统(模块设计)
- 目标检测算法——YOLOv5/YOLOv7改进之结合特征提取网络RFBNet(涨点明显)
- Android P OTA增量升级
- 解决iTunes更新或者重现安装出现“指定账户已存在问题
- CAR-T疗法新突破
热门文章
- mysql误删除表后无法重建
- Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_unicode_ci,IMPLICIT) for operat
- 设计模式04——Factory Method模式
- NDK/C++ 耗时统计类TimeUtils
- 企业级Docker容器镜像仓库Harbor的搭建
- 佳能MP4视频恢复方法
- Codeforces Round #807 (Div. 2) A-C题解
- 光模块价格由带宽还是距离决定_广州单模光模块价格
- 2015_12_27微软校园招聘笔试题目
- Hbuilderx 代码折叠和展开