HTML5代码：超炫的粒子特效

今天在中国移动MM论坛HTML5跨平台开发讨论区看到一个不错的示例，分享给大家咯。展示一个使用HTML5的Canvas画布API制作的，具有响应鼠标动作的具有粒子特效的动画，丝毫不必flash效果差。
先来看下演示：
http://spielzeugz.de/html5/liquid-particles.html
在动画中间点击鼠标，左键按住不动，快速移动鼠标，都会出现意外的效果的哈哈哈~
这个HTML5特效包括3部分代码，HTML部分，js部分和CSS部分，我分别给出源码的内容。
HTML5代码部分：
index.html

<!DOCTYPE html>

<html
lang="en">

<head>

<meta
charset=utf-8>

<title>粒子效果演示- www.lampbo.org canvas 教程 </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"
/>

<script
type="text/javascript"
src="liquid-particles.js"></script>

<link
rel="stylesheet"
type="text/css"
href="pages.css"
/>

</head>

<body>

<div
id="outer">

<div
id="canvasContainer">

<canvas
id="mainCanvas"
width="1000"
height="560"></canvas>

<div
id="output"></div>

</div>

</div>
</script>

</body>
</html>

这个HTML文档主要定义了Canvas标签
第二部分 liquid-particles.js

(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('interact with the mouse, occasionally click or hold down the mousebutton<br>More here: <a href="http://www.lampbo.org/category/web-development/html">lampbo.org/html5</a>   |   Follow us on <a href="http://www.lampbo.org/" target="_blank">LAMPBO</a> or <a href="http://feed.feedsky.com/lampbo" target="_blank">FeedSky</a>');
        }

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 = 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;

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;
})();

最后一部分pages.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%;
}

文章来源

HTML5代码：超炫的粒子特效

猜你喜欢