效果图：
一、HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="js/js.js" type="text/javascript"></script>
</body>
</html>
二、CSS代码：
body {
margin: 0;
padding: 0;
overflow: hidden;
}
三、JS代码：
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); 'floor|random|round|abs|sqrt|PI|atan2|sin|cos|pow|max|min' .split('|') .forEach(function(p) { window[p] = Math[p]; }); var TAU = PI * 2; function r(n) { return random() * n; } function rrng(lo, hi) { return lo + r(hi - lo); } function rint(lo, hi) { return lo + floor(r(hi - lo + 1)); } function choose() { return arguments[rint(0, arguments.length - 1)]; } /*---------------------------------------------------------------------------*/ var W, H, frame, t0, time; var DPR = devicePixelRatio || 1; function dpr(n) { return n * DPR; } function resize() { var w = innerWidth; var h = innerHeight; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; W = canvas.width = w * DPR; H = canvas.height = h * DPR; } function loop(t) { frame = requestAnimationFrame(loop); draw(); time++; } function pause() { cancelAnimationFrame(frame); frame = frame ? null : requestAnimationFrame(loop); } function reset() { cancelAnimationFrame(frame); resize(); ctx.clearRect(0, 0, W, H); init(); time = 0; frame = requestAnimationFrame(loop); } /*---------------------------------------------------------------------------*/ function gray(n) { return 'rgba(0, 0, 0,' + lerp(0.2, 0.55, n) + ')'; } function lerp(a, b, n) { return a + (b - a) * n; } function lerpProp(prop, a, b, n) { return lerp(a[prop], b[prop], n); } function Ring(x, y, rad, w) { this.x = x; this.y = y; this.rad = rad; this.w = w; this.from = { start: 0.75 * TAU, end: 0.75 * TAU, color: r(1) }; this.to = { start: 0.75 * TAU, end: 0.75 * TAU, color: this.from.color }; } Ring.prototype.update = function() { this.from = this.to; this.to = { start: (this.to.start + rrng(-TAU, TAU)) % TAU, end: (this.to.end + rrng(-TAU, TAU)) % TAU, color: r(1) }; }; Ring.prototype.draw = function(n) { var start = lerpProp('start', this.from, this.to, n); var end = lerpProp('end', this.from, this.to, n); var color = gray(lerpProp('color', this.from, this.to, n)); ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = this.w; ctx.arc(this.x, this.y, this.rad, start, end, end - start < 0); ctx.stroke(); }; /*---------------------------------------------------------------------------*/ var STEP = 180; var rings; function init() { rings = []; var cx = floor(W / 2); var cy = floor(H / 2); var spc = dpr(150); var ringspc = dpr(10); var ringw = dpr(9); for (var x = cx - spc; x
相关文章
精彩导读
热门资讯
关注我们
