DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 超級絢麗的html5的頁面代碼
超級絢麗的html5的頁面代碼
編輯：HTML5教程     

 

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會成為移動應用的天敵嗎？
 　　“應用程序”的整體概念或許已悄然發生巨變，在未來的某一天，我
HTML5 對各個標簽的定義與規定：link
所有全局屬性 href rel media hreflang type
HTML5本地數據庫基礎操作詳解
下面分別介紹本地數據庫的各個API及其使用方法。1、利用openDatabase創建數據庫我們可以利

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
HTML 5 語義化標簽收集 Html5元素及基本語法詳解 HTML5多媒體組件的使用——第二部分：音頻 HTML5頁面音視頻在微信和app下自動播放的實現方法 淺析border-radius如何兼容IE HTTP協議中狀態碼的含義 HTML5 WebStorage html5中的input新屬性range使用記錄 HTML 5標簽、屬性、事件及兼容性速查表 HTML5設計原理
熱門推薦
H5平面設計怎麼提升 詳解HTML5中的template標簽 12個不為大家熟知的HTML5設計小技巧 canvas API ，通俗的canvas基礎知識（一） 淺談html5標簽css3的常用樣式 HTML 5 正在改變 Web 利用HTML5中的Canvas繪制一張笑臉的教程 最炫酷的H5怎麼實現的？ HTML5之元素與標簽結構
大家都在看
jQuery對下拉框,單選框,多選框的操作 JS錯誤引發、捕捉和處理 通過pjax實現無刷新翻頁(兼容新版jquery) IE6實現min-width 生成二維碼方法匯總 DIV+CSS命名規則集錦 制作網頁表單的標簽和輸入區 微信js-sdk預覽圖片接口及從拍照或手機相冊中選圖接口用法示例
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved