炫酷的鼠标特效JS 原生代码

  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">  
  3. <head>  
  4.     <title>startitle>  
  5.     <script type="text/javascript">  
  6.         window.onload = function () {  
  7.             C = Math.cos; // cache Math objects  
  8.             S = Math.sin;  
  9.             U = 0;  
  10.             w = window;  
  11.             j = document;  
  12.             d = j.getElementById("c");  
  13.             c = d.getContext("2d");  
  14.             W = d.width = w.innerWidth;  
  15.             H = d.height = w.innerHeight;  
  16.             c.fillRect(0, 0, W, H);  
  17.             c.globalCompositeOperation = "lighter"; // switch to additive color application  
  18.             c.lineWidth = 0.2;  
  19.             c.lineCap = "round";  
  20.             var bool = 0,  
  21.                     t = 0; // theta  
  22.             d.onmousemove = function (e) {  
  23.                 if(window.T) {  
  24.                     if(D==9) { D=Math.random()*15; f(1); }  
  25.                     clearTimeout(T);  
  26.                 }  
  27.                 X = e.pageX; // grab mouse pixel coords  
  28.                 Y = e.pageY;  
  29.                 a=0; // previous coord.x  
  30.                 b=0; // previous coord.y  
  31.                 A = X, // original coord.x  
  32.                         B = Y; // original coord.y  
  33.                 R=(e.pageX/W * 999>>0)/999;  
  34.                 r=(e.pageY/H * 999>>0)/999;  
  35.                 U=e.pageX/H * 360 >>0;  
  36.                 D=9;  
  37.                 g = 360 * Math.PI / 180;  
  38.                 T = setInterval(f = function (e) { // start looping spectrum  
  39.                     c.save();  
  40.                     c.globalCompositeOperation = "source-over"; //  
  41.                     if(e!=1) {  
  42.                         c.fillStyle = "rgba(0,0,0,0.02)";  
  43.                         c.fillRect(0, 0, W, H); //  
  44.                     }  
  45.                     c.restore();  
  46.                     i = 25; while(i --) {  
  47.                         c.beginPath();  
  48.                         if(D > 450 || bool) { // decrease diameter  
  49.                             if(!bool) { // has hit maximum  
  50.                                 bool = 1;  
  51.                             }  
  52.                             if(D < 0.1) { // has hit minimum  
  53.                                 bool = 0;  
  54.                             }  
  55.                             t -g; // decrease theta  
  56.                             D -0.1; // decrease size  
  57.                         }  
  58.                         if(!bool) {  
  59.                             t += g; // increase theta  
  60.                             D += 0.1; // increase size  
  61.                         }  
  62.                         q = (R / r - 1) * t; //  (see: http://en.wikipedia.org/wiki/Hypotrochoid)  
  63.                         x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); //  
  64.                         y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));  
  65.                         if (a) { // draw once two points are set  
  66.                             c.moveTo(a, b);  
  67.                             c.lineTo(x, y)  
  68.                         }  
  69.                         c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; //  
  70.                         c.stroke();  
  71.                         a = x; // set previous coord.x  
  72.                         b = y; // set previous coord.y  
  73.                     }  
  74.                     U -0.5; // increment hue  
  75.                     A = X; // set original coord.x  
  76.                     B = Y; // set original coord.y  
  77.                 }, 16);  
  78.             }  
  79.             j.onkeydown = function(e) { a=b=0; R += 0.05 }  
  80.             d.onmousemove({pageX:300, pageY:290})  
  81.         }  
  82.     script>  
  83. head>  
  84.   
  85. <body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">  
  86. <canvas id="c">canvas>  
  87. body>  
  88. html>  

你可能感兴趣的:(html5混合开发)