一个彩色颗粒随鼠标移动的html5源码

  • 首页 > 代码研究院
  • 作者:梓熙
  • 时间: 2016年9月19日 18:51
  • 字数:6215 个
  • 字号:
  • 评论:0 条
  • 浏览:2471 次
  • 百度:百度已收录
  • 分类: 代码研究院
  • 时间:2016-9-19 18:51 热度:2471° 评论:0 条 

    点击查看原图

    demo:http://zixiylw.top/demo/移动的颗粒/移动的颗粒.html


    使用鼠标控制,单击右键可以分散颗粒,下面附上代码


    ---------------------这是代码开始分割线-----------------------------

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset=utf-8>
    <title>移动的颗粒</title>
    <script type="text/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('用鼠标控制,点击鼠标即可分散颗粒<br><a href="http://zixiylw.top">梓熙’s Blog<a> ');
    }
    else{
    trace("Sorry,这个页面不支持你的浏览器,请尝试使用chrome、opera、firefox、IE9.");
    }
    }

    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>
    <style type="text/css" media="screen">
    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;
    bottom:8px;
    width:98%;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </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">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-11054609-1");
    pageTracker._trackPageview();
    } catch(err) {}
    </script>
    </body>
    </html>

    ---------------------这是代码结束分割线-----------------------------


    正文到此结束
    您阅读这篇文章共花了: 
    本文链接:http://zixiylw.top/cskl.html
    版权声明:若无特殊注明,本文皆为《梓熙》原创,转载请保留文章出处。
    捐赠支持:如果觉得这篇文章对您有帮助,请“扫一扫”鼓励作者!

    热门推荐

    Hello! How do you see it?

    你还可以输入250 / 250 个字

    嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗


    既然没有吐槽,那就赶紧抢沙发吧!

                   

    返回顶部    返回首页    手气不错    后花园   
    版权所有:梓熙博客    站点维护: 梓熙   +主题模板:【PJAX 梓熙主题】        sitemap