原生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让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
javascript实现动态标签云
Oct 16 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 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
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
python getopt 参数处理小示例
2009/06/09 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
使用npy转image图像并保存的实例
2020/07/01 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
2014学雷锋活动总结
2014/03/09 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
作文批改评语大全
2014/04/23 职场文书
大学生赌博检讨书
2014/09/22 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang
Hive HQL支持2种查询语句风格
2022/06/25 数据库