一个很简短但很炫的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画布）。。。。。相关推荐

HTML5之canvas画布教你绘画小黄人
HTML5之canvas画布教你绘画小黄人 Canvas画布:顾名思义绘画的基础,也是一幅画作的根.同样,我们学习技术也需要一步步往上走立好自己根,才能更好的成长.有一些东西总不能完美,但我们都有追求 ...
使用HTML5的Canvas画布来剪裁用户头像
日期:2013-5-23 来源:GBin1.com 本文来自极客标签社区用户webgeek的一个在线HTML5web开发小技巧,帮助你使用html5的画布功能来切割用户上传的大头照. 在线调试例如 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结
首先解释一下合成的含义,合成是指如何精细控制画布上面的对象的透明度和分层效果.其中控制Canvas画布合成的操作的两个属性分别是:globalAlpha和globalCompositeOperatio ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...
HTML5利用canvas画布绘制哆啦A梦
效果图: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
html5 --- 使用canvas画一个渐变矩形
我们希望得到如下效果: 首先准备画布 // HTML <canvas width="500" height="375" id ="a" ...
分享一个很酷很炫的html5特效网站源码
原创整理不易,转载请注明出处:分享一个很酷很炫的html5特效网站源码代码下载地址:http://www.zuidaima.com/share/1784027301841920.htm 在线演示:h ...

一个很简短但很炫的html5代码（canvas画布）。。。。。

一个很简短但很炫的html5代码（canvas画布）。。。。。相关推荐

最新文章

热门文章