Maison > Article > interface Web > Animation de particules JS+HTML5 qui lie les événements de souris
Animation de particules JS+HTML5 qui lie les événements de souris
- php中世界最好的语言original
- 2018-06-01 11:36:111401parcourir
Cette fois, je vais vous présenter l'animation de particules des événements de souris à liaison réelle JS+HTML5. Quelles sont les notes de l'animation de particules des événements de souris à liaison réelle JS+HTML5. Voici les éléments pratiques. cas. Jetons un coup d'oeil.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=gbk>
<title>粒子效果演示</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>
<p id="outer">
<p id="canvasContainer">
<canvas id="mainCanvas" width="1000" height="560"></canvas>
<p id="output"></p>
</p>
</p>
<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 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 < 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 - 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 = "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>
Ici, utilisez ce siteOutil de test d'exécution en ligne HTML/CSS/JS : http://tools.jb51.net/code/HtmlJsRun, disponible Les résultats de test suivants sont obtenus :
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !
Lecture recommandée :
Explication détaillée des étapes pour implémenter une animation de chute de flocon de neige avec JS
Comment utiliser Vue+ toile pour implémenter une fonction de bloc d'écriture manuscrite mobile
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn