一个很简短但很炫的html5代码（canvas画布）。。。。。
生活随笔
收集整理的這篇文章主要介紹了
一个很简短但很炫的html5代码（canvas画布）。。。。。
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近在網上看到一個《一個很簡短但很炫的html5代碼》，特意收藏一下：
[鼠標移入，酷炫樣式]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Breathing Galaxies (3005 bytes)</title> <script type="text/javascript">window.onload = function() {var d = window.document.getElementById("_d");if (!d) {d = window.document.createElement("canvas");d.id = "_d";window.document.getElementsByTagName("BODY")[0].appendChild(d);}C = Math.cos; // cache Math objectsS = Math.sin;U = 0;w = window;j = document;c = d.getContext("2d");W = d.width = w.innerWidth;H = d.height = w.innerHeight;c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)c.globalCompositeOperation = "lighter"; // switch to additive color applicationc.lineWidth = 0.2;c.lineCap = "round";var bool = 0, t = 0; // thetad.onmousemove = function(e) {if (window.T) {if (D == 9) {D = Math.random() * 15;f(1);}clearTimeout(T);}X = e.pageX; // grab mouse pixel coordsY = e.pageY;a = 0; // previous coord.xb = 0; // previous coord.y A = X, // original coord.xB = Y; // original coord.yR = (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) { // start looping spectrumc.save();c.globalCompositeOperation = "source-over"; // switch to additive color applicationif (e != 1) {c.fillStyle = "rgba(0,0,0,0.02)";c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)}c.restore();i = 25;while (i--) {c.beginPath();if (D > 450 || bool) { // decrease diameterif (!bool) { // has hit maximumbool = 1;}if (D < 0.1) { // has hit minimumbool = 0;}t -= g; // decrease thetaD -= 0.1; // decrease size}if (!bool) {t += g; // increase thetaD += 0.1; // increase size}q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25))+ (r - R); // center on xy coordsy = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));if (a) { // draw once two points are setc.moveTo(a, b);c.lineTo(x, y)}c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoidc.stroke();a = x; // set previous coord.xb = y; // set previous coord.y}U -= 0.5; // increment hueA = X; // set original coord.xB = Y; // set original coord.y}, 18);}j.onkeydown = function(e) {a = b = 0;R += 0.05}d.onmousemove({pageX : 300,pageY : 290})} </script> </head> <body style="padding: 0px !important; margin: 0px !important;"> </body> </html>純HTML代碼，純js代碼，效果很不錯，裝逼專用。
?
總結
以上是生活随笔為你收集整理的一个很简短但很炫的html5代码（canvas画布）。。。。。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微软Surface系列固件命名规则
- 下一篇： 软件架构概述