DIV CSS 佈局教程網

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

XML/HTML Code 復制內容到剪貼板 !DOCTYPEhtml html XMLns =http://www.w3.org/1999/xhtml lang =en head title 超級絢麗的Html5的頁面 / title script type =text/Javascript window.onload = function (){ C = Math .cos; S = Math .sin; U…

 

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漫談（2）–HTML5為什麼這樣紅？
Html5這麼紅，除了它天生麗質之外，還離不開標准化組織、各大公司及開發者的支持和追捧。 
一款利用html5和css3動畫排列人物頭像的實例演示
這篇文章主要為大家介紹了一款利用Html5和CSS3動畫排列人物頭像的實例演示，這款實例頁面初始時
sphinx使用及其簡單配置
一、sphinx使用進入你要創建文檔的目錄，例如要創建在目錄/home/wwwroot/doc下c

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
html5搖一搖代碼優化包括DeviceMotionEvent等等 html5插入曲線變形動畫的使用 html5 Web開發：防止浏覽器假死的方法 html5 video標簽屏蔽右鍵視頻另存為的js代碼 HTML5 Canvas旋轉動畫的2個代碼例子（一個旋轉的太極圖效果） HTML5 自動聚焦(autofocus)屬性使用介紹 HTML5+lufylegend實現游戲中的卷軸 html5小技巧之通過document.head獲取head元素 《精通HTML5編程》第十章：離線應用和尚未廣泛支 HTML5的一個顯示電池狀態的API簡介
熱門推薦
HTML5開發的翻頁效果 初學者必知的HTML 5入門級技巧 利用HTML5 Canvas做在線圖像處理 你可能不知道的5個功能強大的 HTML5 API HTML5之SVG 2D入門3—文本與圖像及渲染文本介紹 24個canvas基礎知識小結 HTML5漫談（4）--HTML5應用平台:PhoneGAP HTML5教程之html 5 本地數據庫（Web Sql Database） HTML 簡史
大家都在看
HTML 5來臨 Flash死亡倒計時？(2) js和php如何獲取當前url的內容 JS實現環形進度條（從0到100%）效果 盲人站長深惡痛絕的onfocus=”this.blur()” Javascript圖像處理—亮度對比度應用案例 js實現checkbox全選、不選與反選的方法教程 復雜的javascript窗口分幀解析 舉例講解jQuery中可見性過濾選擇器的使用
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved