原生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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
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
人族 TERRAN 概述
2020/03/14 星际争霸
PHP数据库操作三:redis用法分析
2017/08/16 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
深入理解node.js http模块
2018/01/24 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
python根据文件大小打log日志
2014/10/09 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python工厂函数用法实例分析
2018/05/14 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
酒店管理求职信
2014/06/09 职场文书
会计师事务所实习证明
2014/11/16 职场文书
教师节主题班会教案
2015/08/17 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python