大家好，欢迎来到IT知识分享网。
使用说明：复制下面全部代码，保存为后缀为“.html”文件，然后用chrome打开即可！
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title>圣诞树</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<style>
html,
body {
width: 100%;
height: 500px;
margin: 0;
padding: 0;
border: 0;
background: #000;
}
.app {
text-align: center;
margin: 10px;
}
/* div {
margin: 0;
padding: 0;
border: 0;
} */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 27px;
background-color: white;
color: black;
text-align: center;
line-height: 25px;
}
a {
color: black;
text-decoration: none;
border-bottom: 1px dashed black;
}
a:hover {
border-bottom: 1px solid red;
}
.previous {
float: left;
margin-left: 10px;
}
.next {
float: right;
margin-right: 10px;
}
.green {
color: green;
}
.red {
color: red;
}
textarea {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
padding-bottom: 20px;
}
.block-outer {
float: left;
width: 22%;
height: 100%;
padding: 5px;
border-left: 1px solid black;
margin: 30px 3px 3px 3px;
}
.block-inner {
height: 68%;
}
.one {
border: 0;
}
</style>
</head>
<body marginwidth="0" marginheight="0">
<div class="app">
<canvas id="c" height="100%" width="100%">
</div>
</body>
<script>
var collapsed = true;
function toggle() {
var fs = top.document.getElementsByTagName("frameset")[0];
var f = fs.getElementsByTagName("frame");
if (collapsed) {
fs.rows = "250px,*";
// enable resizing of frames in firefox/opera
fs.noResize = false;
f[0].noResize = false;
f[1].noResize = false;
} else {
fs.rows = "30px,*";
// disable resizing of frames in firefox/opera
fs.noResize = true;
f[0].noResize = true;
f[1].noResize = true;
}
collapsed = !collapsed;
}
var b = document.body;
var c = document.getElementsByTagName("canvas")[0];
var a = c.getContext("2d");
document.body.clientWidth; // fix bug in chrome.
// start of submission //
M = Math;
Q = M.random;
J = [];
U = 16;
T = M.sin;
E = M.sqrt;
for (O = k = 0; (x = z = j = i = k < 200); )
with ((M[k] = k ? c.cloneNode(0) : c)) {
width = height = k ? 32 : (W = 445);
with (getContext("2d"))
if ((k > 10) | !k)
for (
font = "60px Impact", V = "rgba(";
(I = i * U),
(fillStyle = k
? k == 13
? V + "205,205,215,.15)"
: V + (147 + I) + "," + (k % 2 ? 128 + I : 0) + "," + I + ",.5)"
: "#cca"),
i < 7;
)
beginPath(
fill(
arc(
U - i / 3,
24 - i / 2,
k == 13 ? 4 - i++ / 2 : 8 - i++,
0,
M.PI * 2,
1
)
)
);
else
for (
;
(x = T(i)),
(y = Q() * 2 - 1),
(D = x * x + y * y),
(B = E(D - x / 0.9 - 1.5 * y + 1)),
(R = (67 * (B + 1) * (L = k / 9 + 0.8)) >> 1),
i++ < W;
)
if (D < 1)
beginPath(
(strokeStyle = V + R + "," + ((R + B * L) >> 0) + ",40,.1)")
),
moveTo(U + x * 8, U + y * 8),
lineTo(U + x * U, U + y * U),
stroke();
for (y = H = k + E(k++) * 25, R = Q() * W; (P = 3), j < H; )
J[O++] = [
(x += T(R) * P + Q() * 6 - 3),
(y += Q() * U - 8),
(z += T(R - 11) * P + Q() * 6 - 3),
((j / H) * 20 + (((j += U) > H) & (Q() > 0.8) ? Q((P = 9)) * 4 : 0)) >>
1,
];
}
setInterval(function G(m, l) {
A = T(D - 11);
if (l) return (m[2] - l[2]) * A + (l[0] - m[0]) * T(D);
a.clearRect(0, 0, W, W);
J.sort(G);
for (
i = 0;
(L = J[i++]);
a.drawImage(M[L[3] + 1], (207 + L[0] * A + L[2] * T(D)) >> 0, L[1] >> 1)
) {
if (i == 2e3) a.fillText("Merry Christmas!", U, 345);
if (!(i % 7))
a.drawImage(
M[13],
(157 * (i * i) + T(D * 5 + i * i) * 5) % W >> 0,
(113 * i + (D * i) / 60) % (290 + i / 99) >> 0
);
}
D += 0.02;
}, 1);
// end of submission //
</script>
</html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/33621.html
