原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果


Posted in Javascript onMay 03, 2018

本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=gbk>
<title>3water.com 粒子效果演示</title>
<meta name="description" content="HTML5/canvas demo, 500 particles to play around with." />
<meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" />
<style type="text/css">
html, body {
text-align: center;
margin:0;
padding:0;
background: #000000;
color: #666666;
line-height: 1.25em;
}
#outer {
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 1px;
overflow: visible;
}
#canvasContainer {
position: absolute;
width: 1000px;
height: 560px;
top: -280px;
left: -500px;
}
canvas {
border: 1px solid #333333;
}
a {
color: #00CBCB;
text-decoration:none;
font-weight:bold;
}
a:hover {
color:#FFFFFF;
}
#output {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
margin-top:4px;
}
#footer{
font-size: 0.6em;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
bottombottom:8px;
width:98%;
}
</style>
</head>
<body>
<div id="outer">
<div id="canvasContainer">
<canvas id="mainCanvas" width="1000" height="560"></canvas>
<div id="output"></div>
</div>
</div>
<script type="text/javascript">
//javascript部分
(function(){
var PI_2 = Math.PI * 2;
var canvasW = 1000;
var canvasH = 560;
var numMovers = 600;
var friction = 0.96;
var movers = [];
var canvas;
var ctx;
var canvasDiv;
var outerDiv;
var mouseX;
var mouseY;
var mouseVX;
var mouseVY;
var prevMouseX;
var prevMouseY;
var isMouseDown;
function init(){
canvas = document.getElementById("mainCanvas");
if ( canvas.getContext ){
setup();
setInterval( run , 33 );
trace('你们好');
}
else{
trace("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9.");
}
}
function setup(){
outerDiv = document.getElementById("outer");
canvasDiv = document.getElementById("canvasContainer");
ctx = canvas.getContext("2d");
var i = numMovers;
while ( i-- ){
var m = new Mover();
m.x = canvasW * 0.5;
m.y = canvasH * 0.5;
m.vX = Math.cos(i) * Math.random() * 34;
m.vY = Math.sin(i) * Math.random() * 34;
movers[i] = m;
}
mouseX = prevMouseX = canvasW * 0.5;
mouseY = prevMouseY = canvasH * 0.5;
document.onmousedown = onDocMouseDown;
document.onmouseup = onDocMouseUp;
document.onmousemove = onDocMouseMove;
}
function run(){
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(8,8,12,0.65)";
ctx.fillRect( 0 , 0 , canvasW , canvasH );
ctx.globalCompositeOperation = "lighter";
mouseVX = mouseX - prevMouseX;
mouseVY = mouseY - prevMouseY;
prevMouseX = mouseX;
prevMouseY = mouseY;
var toDist = canvasW * 0.86;
var stirDist = canvasW * 0.125;
var blowDist = canvasW * 0.5;
var Mrnd = Math.random;
var Mabs = Math.abs;
var i = numMovers;
while ( i-- ){
var m = movers[i];
var x = m.x;
var y = m.y;
var vX = m.vX;
var vY = m.vY;
var dX = x - mouseX;
var dY = y - mouseY;
var d = Math.sqrt( dX * dX + dY * dY ) || 0.001;
dX /= d;
dY /= d;
if ( isMouseDown ){
if ( d < blowDist ){
var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
vX += dX * blowAcc + 0.5 - Mrnd();
vY += dY * blowAcc + 0.5 - Mrnd();
}
}
if ( d < toDist ){
var toAcc = ( 1 - ( d / toDist ) ) * canvasW * 0.0014;
vX -= dX * toAcc;
vY -= dY * toAcc;
}
if ( d < stirDist ){
var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * 0.00026;
vX += mouseVX * mAcc;
vY += mouseVY * mAcc;
}
vX *= friction;
vY *= friction;
var avgVX = Mabs( vX );
var avgVY = Mabs( vY );
var avgV = ( avgVX + avgVY ) * 0.5;
if( avgVX < .1 ) vX *= Mrnd() * 3;
if( avgVY < .1 ) vY *= Mrnd() * 3;
var sc = avgV * 0.45;
sc = Math.max( Math.min( sc , 3.5 ) , 0.4 );
var nextX = x + vX;
var nextY = y + vY;
if ( nextX > canvasW ){
nextX = canvasW;
vX *= -1;
}
else if ( nextX < 0 ){
nextX = 0;
vX *= -1;
}
if ( nextY > canvasH ){
nextY = canvasH;
vY *= -1;
}
else if ( nextY < 0 ){
nextY = 0;
vY *= -1;
}
m.vX = vX;
m.vY = vY;
m.x = nextX;
m.y = nextY;
ctx.fillStyle = m.color;
ctx.beginPath();
ctx.arc( nextX , nextY , sc , 0 , PI_2 , true );
ctx.closePath();
ctx.fill();
}
}
function onDocMouseMove( e ){
var ev = e ? e : window.event;
mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;
mouseY = ev.clientY - outerDiv.offsetTop - canvasDiv.offsetTop;
}
function onDocMouseDown( e ){
isMouseDown = true;
return false;
}
function onDocMouseUp( e ){
isMouseDown = false;
return false;
}
function Mover(){
this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";
this.y = 0;
this.x = 0;
this.vX = 0;
this.vY = 0;
this.size = 1;
}
function rect( context , x , y , w , h ){
context.beginPath();
context.rect( x , y , w , h );
context.closePath();
context.fill();
}
function trace( str ){
document.getElementById("output").innerHTML = str;
}
window.onload = init;
})();
</script>
</body>
</html>

这里使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
Angular学习教程之RouterLink花式跳转
May 03 #Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 #Javascript
Vue表单类的父子组件数据传递示例
May 03 #Javascript
Webpack path与publicPath的区别详解
May 03 #Javascript
Webpack中publicPath路径问题详解
May 03 #Javascript
Angular Renderer (渲染器)的具体使用
May 03 #Javascript
react router4+redux实现路由权限控制的方法
May 03 #Javascript
You might like
PHP 实例化类的一点摘记
2008/03/23 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
node.js实现上传文件功能
2019/07/15 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python定时关机小脚本
2018/06/20 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
降消项目实施方案
2014/03/30 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
成绩单公证书
2014/04/10 职场文书
公司经理任命书
2014/06/05 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
公司职员入党自传书
2015/06/26 职场文书
会计岗位工作总结
2015/08/12 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP