超級華麗的html5的頁面

2024-03-01    分類： 網(wǎng)站建設(shè)

關(guān)于html5，相信大家都早已不陌生，今天創(chuàng)新互聯(lián)就來帶大家見識一下，我們在DW里編輯一段代碼：XML/HTML Code復(fù)制內(nèi)容到剪貼板 ? ?<!DOCTYPE html>? <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 = 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 <canvas> 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})? }</script>? </head>? <body style=”margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;”>? <canvas id=”myCanvas”></canvas>? </body>? </html>

產(chǎn)生效果為！

新聞名稱：超級華麗的html5的頁面
轉(zhuǎn)載源于：http://www.bm7419.com/news25/319575.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站內(nèi)鏈、網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、網(wǎng)站改版、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)