這篇文章主要講解了“怎么編寫超級絢麗的HTML 5的頁面”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么編寫超級絢麗的HTML 5的頁面”吧！

我們提供的服務(wù)有：網(wǎng)站建設(shè)、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、雁峰ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的雁峰網(wǎng)站制作公司

超級絢麗的html5的頁面

     window.onload = function () {  C = Math.cos;  S = Math.sin;  U = 0;  canvas = document.getElementById(“myCanvas”);  c = canvas.getContext(“2d”);  var W = canvas.width = window.innerWidth;  var H = canvas.height = window.innerHeight;  c.fillRect(0, 0, W, H); // resize  and draw black rect (default)  c.globalCompositeOperation = “l(fā)ighter”; // switch to additive color application  c.lineWidth = 0.2;//設(shè)置畫筆的大小  c.lineCap = “round”;//設(shè)置圓滑  var bool = 0,  t = 0; // theta  canvas.onmousemove = function (e) {  if(window.T) {  if(D==9) {  D=Math.random()*15; f(1); }  clearTimeout(T);  }  X = e.pageX; // grab mouse pixel coords  Y = e.pageY;  a=0; // previous coord.x  b=0; // previous coord.y  A = X, // original coord.x  B = Y; // original coord.y  R=(e.pageX/W * 999>>0)/999;  r=(e.pageY/H * 999>>0)/999;  U=e.pageX/H * 360 >>0;  D=9;  g = 360 * Math.PI / 180;  T = setInterval(f = function (e) {  c.save();  c.globalCompositeOperation = “source-over”;  if(e!=1) {  c.fillStyle = “rgba(0,0,0,0.02)”;  c.fillRect(0, 0, W, H);  }  c.restore();  i = 25; while(i –) {  c.beginPath();  if(D > 450 || bool) { // decrease diameter  if(!bool) { // has hit maximum  bool = 1;  }  if(D < 0.1) { // has hit minimum  bool = 0;  }  t -= g; // decrease theta  D -= 0.1; // decrease size  }  if(!bool) {  t += g; // increase theta  D += 0.1; // increase size  }  q = (R / r – 1) * t;  x = (R – r) * C(t) + D * C(q) + (A + (X – A) * (i / 25)) + (r – R); // center on xy coords  y = (R – r) * S(t) – D * S(q) + (B + (Y – B) * (i / 25));  if (a) {  c.moveTo(a, b);  c.lineTo(x, y)  }  c.strokeStyle = “hsla(” + (U % 360) + “,100%,50%,0.75)”; // draw rainbow hypotrochoid  c.stroke();  a = x; // set previous coord.x  b = y; // set previous coord.y  }  U -= 0.5; // increment hue  A = X; // set original coord.x  B = Y; // set original coord.y  }, 16);  }  document.onkeydown = function(e) { a=b=0; R += 0.05 }  canvas.onmousemove({pageX:300, pageY:290})  }     

感謝各位的閱讀，以上就是“怎么編寫超級絢麗的HTML 5的頁面”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么編寫超級絢麗的HTML 5的頁面這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！