JS+HTML5는 마우스 바인딩된 입자 흐름 애니메이션을 만듭니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS+HTML5는 마우스 바인딩된 입자 흐름 애니메이션을 만듭니다.

May 14, 2018 am 11:52 AM

h5 javascript

이번에는 마우스 바인딩 입자 흐름 애니메이션을 만들기 위해 JS+HTML5를 가져오겠습니다. JS+HTML5로 마우스 바인딩 입자 흐름 애니메이션을 만드는 데 사용하는 노트는 무엇입니까? .

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=gbk&gt;
&lt;title&gt;粒子效果演示&lt;/title&gt;
&lt;meta name=&quot;description&quot; content=&quot;HTML5/canvas demo, 500 particles to play around with.&quot; /&gt;
&lt;meta name=&quot;keywords&quot; content=&quot;html5,canvas,javascript,particles,interactive,velocity,programming,flash&quot; /&gt;
&lt;style type=&quot;text/css&quot;&gt;
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%;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p id=&quot;outer&quot;&gt;
&lt;p id=&quot;canvasContainer&quot;&gt;
&lt;canvas id=&quot;mainCanvas&quot; width=&quot;1000&quot; height=&quot;560&quot;&gt;&lt;/canvas&gt;
&lt;p id=&quot;output&quot;&gt;&lt;/p&gt;
&lt;/p&gt;
&lt;/p&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
//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 canvasp;
var outerp;
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(){
outerp = document.getElementById("outer");
canvasp = 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 &lt; blowDist ){
var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
vX += dX * blowAcc + 0.5 - Mrnd();
vY += dY * blowAcc + 0.5 - Mrnd();
}
}
if ( d &lt; toDist ){
var toAcc = ( 1 - ( d / toDist ) ) * canvasW * 0.0014;
vX -= dX * toAcc;
vY -= dY * toAcc;
}
if ( d &lt; 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 &lt; .1 ) vX *= Mrnd() * 3;
if( avgVY &lt; .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 &gt; canvasW ){
nextX = canvasW;
vX *= -1;
}
else if ( nextX &lt; 0 ){
nextX = 0;
vX *= -1;
}
if ( nextY &gt; canvasH ){
nextY = canvasH;
vY *= -1;
}
else if ( nextY &lt; 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 - outerp.offsetLeft - canvasp.offsetLeft;
mouseY = ev.clientY - outerp.offsetTop - canvasp.offsetTop;
}
function onDocMouseDown( e ){
isMouseDown = true;
return false;
}
function onDocMouseUp( e ){
isMouseDown = false;
return false;
}
function Mover(){
this.color = &quot;rgb(&quot; + Math.floor( Math.random()*255 ) + &quot;,&quot; + Math.floor( Math.random()*255 ) + &quot;,&quot; + Math.floor( Math.random()*255 ) + &quot;)&quot;;
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(&quot;output&quot;).innerHTML = str;
}
window.onload = init;
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!