超级绚丽的html5的页面代码

时间：2015-08-11

 

XML/HTML Code复制内容到剪贴板
  1.  <!DOCTYPE html>  
  2. <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>  
  3.   
  4. <head>  
  5.   
  6. <title>超级绚丽的html5的页面</title>  
  7.   
  8. <script type=”text/javascript”>  
  9.   
  10. window.onload = function () {  
  11. C = Math.cos;  
  12. S = Math.sin;  
  13. U = 0;  
  14. canvas = document.getElementById(“myCanvas”);  
  15. c = canvas.getContext(“2d”);  
  16. var W = canvas.width = window.innerWidth;  
  17. var H = canvas.height = window.innerHeight;  
  18. c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)  
  19. c.globalCompositeOperation = “lighter”; // switch to additive color application  
  20. c.lineWidth = 0.2;//设置画笔的大小  
  21. c.lineCap = “round”;//设置圆滑  
  22. var bool = 0,  
  23. t = 0; // theta  
  24.   
  25. canvas.onmousemove = function (e) {  
  26. if(window.T) {  
  27. if(D==9) {  
  28. D=Math.random()*15; f(1); }  
  29. clearTimeout(T);  
  30. }  
  31. X = e.pageX; // grab mouse pixel coords  
  32. Y = e.pageY;  
  33. a=0; // previous coord.x  
  34. b=0; // previous coord.y  
  35. A = X, // original coord.x  
  36. B = Y; // original coord.y  
  37. R=(e.pageX/W * 999>>0)/999;  
  38. r=(e.pageY/H * 999>>0)/999;  
  39. U=e.pageX/H * 360 >>0;  
  40. D=9;  
  41. g = 360 * Math.PI / 180;  
  42. T = setInterval(f = function (e) {  
  43. c.save();  
  44. c.globalCompositeOperation = “source-over”;  
  45. if(e!=1) {  
  46. c.fillStyle = “rgba(0,0,0,0.02)”;  
  47. c.fillRect(0, 0, W, H);  
  48. }  
  49.   
  50. c.restore();  
  51.   
  52. i = 25; while(i –) {  
  53.   
  54. c.beginPath();  
  55.   
  56. if(D > 450 || bool) { // decrease diameter  
  57.   
  58. if(!bool) { // has hit maximum  
  59.   
  60. bool = 1;  
  61.   
  62. }  
  63.   
  64. if(D < 0.1) { // has hit minimum  
  65.   
  66. bool = 0;  
  67.   
  68. }  
  69.   
  70. t -= g; // decrease theta  
  71.   
  72. D -= 0.1; // decrease size  
  73.   
  74. }  
  75.   
  76. if(!bool) {  
  77.   
  78. t += g; // increase theta  
  79.   
  80. D += 0.1; // increase size  
  81.   
  82. }  
  83.   
  84. q = (R / r – 1) * t;  
  85.   
  86. x = (R – r) * C(t) + D * C(q) + (A + (X – A) * (i / 25)) + (r – R); // center on xy coords  
  87.   
  88. y = (R – r) * S(t) – D * S(q) + (B + (Y – B) * (i / 25));  
  89.   
  90. if (a) {  
  91.   
  92. c.moveTo(a, b);  
  93.   
  94. c.lineTo(x, y)  
  95.   
  96. }  
  97.   
  98. c.strokeStyle = “hsla(” + (U % 360) + “,100%,50%,0.75)”; // draw rainbow hypotrochoid  
  99.   
  100. c.stroke();  
  101.   
  102. a = x; // set previous coord.x  
  103.   
  104. b = y; // set previous coord.y  
  105.   
  106. }  
  107.   
  108. U -= 0.5; // increment hue  
  109.   
  110. A = X; // set original coord.x  
  111.   
  112. B = Y; // set original coord.y  
  113.   
  114. }, 16);  
  115.   
  116. }  
  117.   
  118. document.onkeydown = function(e) { a=b=0; R += 0.05 }  
  119. canvas.onmousemove({pageX:300, pageY:290})  
  120. }</script>  
  121. </head>  
  122. <body style=”margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;”>  
  123. <canvas id=”myCanvas”></canvas>  
  124. </body>  
  125. </html>  

 

上一条：基于HTML5 的人脸识别技术核心代码 下一条:使用HTML5/CSS3快速制作便签贴特效

相关文章

最新文章

Copyright © 2021-2022 深圳市沃梦达电子商务有限公司 All Rights Reserved.