菜单

原生JS+HTML5兑现跟随鼠标一同流动的粒子动漫效果_javascript本领_脚本之家

2020年3月28日 - 新闻中心

澳门太阳集团,正文实例呈报了原生JS+HTML5得以实现跟随鼠标一同流动的粒子动漫效果。分享给大家供大家参照他事他说加以调查,具体如下:

正文实例解析了JS逻辑运算符短路操作。共享给大家供大家参照他事他说加以考查,具体如下:

www.jb51.net 粒子效果演示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%;}//javascript部分{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;if {setup();setInterval;trace;}else{trace("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9.");}}function setup(){outerDiv = document.getElementById;canvasDiv = document.getElementById;ctx = canvas.getContext;var i = numMovers;while {var m = new Mover();m.x = canvasW * 0.5;m.y = canvasH * 0.5;m.vX = Math.cos * 34;m.vY = Math.sin * 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";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 {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 || 0.001;dX /= d;dY /= d;if {if {var blowAcc =  ) * 14;vX += dX * blowAcc + 0.5 - Mrnd();vY += dY * blowAcc + 0.5 - Mrnd{var toAcc =  * canvasW * 0.0014;vX -= dX * toAcc;vY -= dY * toAcc;}if {var mAcc =  ) * canvasW * 0.00026;vX += mouseVX * mAcc;vY += mouseVY * mAcc;}vX *= friction;vY *= friction;var avgVX = Mabs;var avgVY = Mabs;var avgV =  * 0.5;if vX *= Mrnd() * 3;if vY *= Mrnd() * 3;var sc = avgV * 0.45;sc = Math.max , 0.4 );var nextX = x + vX;var nextY = y + vY;if {nextX = canvasW;vX *= -1;}else if {nextX = 0;vX *= -1;}if {nextY = canvasH;vY *= -1;}else if {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;}}function onDocMouseMove{var ev = e ? e : window.event;mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;mouseY = ev.clientY - outerDiv.offsetTop - canvasDiv.offsetTop;}function onDocMouseDown{isMouseDown = true;return false;}function onDocMouseUp{isMouseDown = false;return false;}function Mover(){this.color = "rgb(" + Math.floor + "," + Math.floor + "," + Math.floor + ")";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;context.closePath;}function trace{document.getElementById.innerHTML = str;}window.onload = init;})();

js逻辑运算符有八个:逻辑非!、逻辑与&&、逻辑或||。

此间运用本站HTML/CSS/JS在线运维测量试验工具

所谓短路操作正是,当&&的第叁个操作数的值是false时,直接再次来到第三个操作数的值,不再对第叁个操作数进行测算;

越来越多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript+HTML5神效与本领汇总》、《JavaScript图片操作才干大全》、《JavaScript图形绘制工夫总括》、《JavaScript错误与调整技艺总计》、《JavaScript数据布局与算法手艺总括》、《JavaScript遍历算法与技巧计算》及《JavaScript数学生运动算用法计算》

var bar1 = 0&&c;console.log;//bar1=====0var foo1 = 5&&c;console.log;//报c is not defined错误。

意在本文所述对大家JavaScript程序设计有所扶植。

行使本站HTML/CSS/JS在线运维测验工具

当||的率先个操作数的值是true时,直接再次来到重临第多个操作数的值,不再对第3个操作数实行总计;

var foo = 5||c;console.log;//foo====5 不报错var bar = 0||c;console.log;//报c is not defined错误。

动用本站HTML/CSS/JS在线运营测验工具

小编寄语:成功的征途并不拥堵,因为能贯彻始终的人比超级少!

越多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript错误与调解工夫总计》、《javascript编码操作技艺计算》、《JavaScript数据布局与算法技术总括》、《JavaScript遍历算法与本领总括》及《JavaScript数学生运动算用法总计》

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图