Skip to content

Commit 968d07c

Browse files
hefuyicoderhefuyicoder
committed
Site updated: 2017-05-08 21:34:46
1 parent 9e404aa commit 968d07c

File tree

20 files changed

+2262
-1871
lines changed

20 files changed

+2262
-1871
lines changed

‎2017/04/15/听听，一款优雅的开源音乐播放器/index.html

Lines changed: 133 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101

102102

103103

104-
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.1" />
104+
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?v=5.1.1" />
105105

106106

107107

@@ -832,8 +832,6 @@ <h3 id="Contact-Me"><a href="#Contact-Me" class="headerlink" title="Contact Me">
832832

833833

834834

835-
836-
837835

838836

839837

@@ -862,9 +860,6 @@ <h3 id="Contact-Me"><a href="#Contact-Me" class="headerlink" title="Contact Me">
862860

863861
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
864862

865-
866-
<script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
867-
868863

869864

870865

@@ -1369,113 +1364,141 @@ <h3 id="Contact-Me"><a href="#Contact-Me" class="headerlink" title="Contact Me">
13691364

13701365

13711366
<script>
1372-
class Circle {
1373-
//创建对象
1374-
//以一个圆为对象
1375-
//设置随机的 x，y坐标，r半径，_mx，_my移动的距离
1376-
//this.r是创建圆的半径，参数越大半径越大
1377-
//this._mx,this._my是移动的距离，参数越大移动
1378-
constructor(x, y) {
1379-
this.x = x;
1380-
this.y = y;
1381-
this.r = Math.random() * 10 ;
1382-
this._mx = Math.random() ;
1383-
this._my = Math.random() ;
1384-
}
1385-
//canvas 画圆和画直线
1386-
//画圆就是正常的用canvas画一个圆
1387-
//画直线是两个圆连线，为了避免直线过多，给圆圈距离设置了一个值，距离很远的圆圈，就不做连线处理
1388-
drawCircle(ctx) {
1389-
ctx.beginPath();
1390-
//arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。
1391-
ctx.arc(this.x, this.y, this.r, 0, 360)
1392-
ctx.closePath();
1393-
ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
1394-
ctx.fill();
1395-
}
1396-
drawLine(ctx, _circle) {
1397-
let dx = this.x - _circle.x;
1398-
let dy = this.y - _circle.y;
1399-
let d = Math.sqrt(dx * dx + dy * dy)
1400-
if (d < 150) {
1401-
ctx.beginPath();
1402-
//开始一条路径，移动到位置 this.x,this.y。创建到达位置 _circle.x,_circle.y 的一条线：
1403-
ctx.moveTo(this.x, this.y); //起始点
1404-
ctx.lineTo(_circle.x, _circle.y); //终点
1405-
ctx.closePath();
1406-
ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
1407-
ctx.stroke();
1367+
'use strict';
1368+
1369+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
1370+
1371+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
1372+
1373+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
1374+
1375+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1376+
1377+
var Circle = function () {
1378+
function Circle(x, y) {
1379+
_classCallCheck(this, Circle);
1380+
1381+
this.x = x;
1382+
this.y = y;
1383+
this.r = Math.random() * 10;
1384+
this._mx = Math.random();
1385+
this._my = Math.random();
14081386
}
1409-
}
1410-
// 圆圈移动
1411-
// 圆圈移动的距离必须在屏幕范围内
1412-
move(w, h) {
1413-
this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
1414-
this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
1415-
this.x += this._mx / 2;
1416-
this.y += this._my / 2;
1417-
}
1418-
}
1419-
//鼠标点画圆闪烁变动
1420-
class currentCirle extends Circle {
1421-
constructor(x, y) {
1422-
super(x, y)
1423-
}
1424-
drawCircle(ctx) {
1425-
ctx.beginPath();
1426-
//注释内容为鼠标焦点的地方圆圈半径变化
1427-
//this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
1428-
this.r = 8;
1429-
ctx.arc(this.x, this.y, this.r, 0, 360);
1430-
ctx.closePath();
1431-
//ctx.fillStyle = 'rgba(0,0,0,' + (parseInt(Math.random() * 100) / 100) + ')'
1432-
ctx.fillStyle = 'rgba(255, 77, 54, 0.3)'
1433-
ctx.fill();
1434-
}
1435-
}
1436-
//更新页面用requestAnimationFrame替代setTimeout
1437-
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
1438-
let canvas = document.getElementById('canvas');
1439-
let ctx = canvas.getContext('2d');
1440-
let w = canvas.width = canvas.offsetWidth;
1441-
let h = canvas.height = canvas.offsetHeight;
1442-
let circles = [];
1443-
let current_circle = new currentCirle(0, 0)
1444-
let draw = function () {
1445-
ctx.clearRect(0, 0, w, h);
1446-
for (let i = 0; i < circles.length; i++) {
1447-
circles[i].move(w, h);
1448-
circles[i].drawCircle(ctx);
1449-
for (j = i + 1; j < circles.length; j++) {
1450-
circles[i].drawLine(ctx, circles[j])
1387+
1388+
_createClass(Circle, [{
1389+
key: 'drawCircle',
1390+
value: function drawCircle(ctx) {
1391+
ctx.beginPath();
1392+
//arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。
1393+
ctx.arc(this.x, this.y, this.r, 0, 360);
1394+
ctx.closePath();
1395+
ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
1396+
ctx.fill();
1397+
}
1398+
}, {
1399+
key: 'drawLine',
1400+
value: function drawLine(ctx, _circle) {
1401+
var dx = this.x - _circle.x;
1402+
var dy = this.y - _circle.y;
1403+
var d = Math.sqrt(dx * dx + dy * dy);
1404+
if (d < 150) {
1405+
ctx.beginPath();
1406+
1407+
ctx.moveTo(this.x, this.y); //起始点
1408+
ctx.lineTo(_circle.x, _circle.y); //终点
1409+
ctx.closePath();
1410+
ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
1411+
ctx.stroke();
1412+
}
1413+
}
1414+
1415+
1416+
}, {
1417+
key: 'move',
1418+
value: function move(w, h) {
1419+
this._mx = this.x < w && this.x > 0 ? this._mx : -this._mx;
1420+
this._my = this.y < h && this.y > 0 ? this._my : -this._my;
1421+
this.x += this._mx / 2;
1422+
this.y += this._my / 2;
1423+
}
1424+
}]);
1425+
1426+
return Circle;
1427+
}();
1428+
1429+
1430+
1431+
var currentCirle = function (_Circle) {
1432+
_inherits(currentCirle, _Circle);
1433+
1434+
function currentCirle(x, y) {
1435+
_classCallCheck(this, currentCirle);
1436+
1437+
return _possibleConstructorReturn(this, (currentCirle.__proto__ || Object.getPrototypeOf(currentCirle)).call(this, x, y));
14511438
}
1452-
}
1453-
if (current_circle.x) {
1454-
current_circle.drawCircle(ctx);
1455-
for (var k = 1; k < circles.length; k++) {
1456-
current_circle.drawLine(ctx, circles[k])
1439+
1440+
_createClass(currentCirle, [{
1441+
key: 'drawCircle',
1442+
value: function drawCircle(ctx) {
1443+
ctx.beginPath();
1444+
1445+
//this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
1446+
this.r = 8;
1447+
ctx.arc(this.x, this.y, this.r, 0, 360);
1448+
ctx.closePath();
1449+
//ctx.fillStyle = 'rgba(0,0,0,' + (parseInt(Math.random() * 100) / 100) + ')'
1450+
ctx.fillStyle = 'rgba(255, 77, 54, 0.6)';
1451+
ctx.fill();
1452+
}
1453+
}]);
1454+
1455+
return currentCirle;
1456+
}(Circle);
1457+
1458+
1459+
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
1460+
1461+
var canvas = document.getElementById('canvas');
1462+
var ctx = canvas.getContext('2d');
1463+
var w = canvas.width = canvas.offsetWidth;
1464+
var h = canvas.height = canvas.offsetHeight;
1465+
var circles = [];
1466+
var current_circle = new currentCirle(0, 0);
1467+
1468+
var draw = function draw() {
1469+
ctx.clearRect(0, 0, w, h);
1470+
for (var i = 0; i < circles.length; i++) {
1471+
circles[i].move(w, h);
1472+
circles[i].drawCircle(ctx);
1473+
for (j = i + 1; j < circles.length; j++) {
1474+
circles[i].drawLine(ctx, circles[j]);
1475+
}
14571476
}
1458-
}
1459-
requestAnimationFrame(draw)
1460-
}
1461-
let init = function (num) {
1462-
for (var i = 0; i < num; i++) {
1463-
circles.push(new Circle(Math.random() * w, Math.random() * h));
1464-
}
1465-
draw();
1466-
}
1467-
window.addEventListener('load', init(60));
1468-
window.onmousemove = function (e) {
1469-
e = e || window.event;
1470-
current_circle.x = e.clientX;
1471-
current_circle.y = e.clientY;
1472-
}
1473-
window.onmouseout = function () {
1474-
current_circle.x = null;
1475-
current_circle.y = null;
1476-
};
1477-
</script>
1477+
if (current_circle.x) {
1478+
current_circle.drawCircle(ctx);
1479+
for (var k = 1; k < circles.length; k++) {
1480+
current_circle.drawLine(ctx, circles[k]);
1481+
}
1482+
}
1483+
requestAnimationFrame(draw);
1484+
};
14781485

1479-
<a href="https://github.com/hefuyicoder"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
1486+
var init = function init(num) {
1487+
for (var i = 0; i < num; i++) {
1488+
circles.push(new Circle(Math.random() * w, Math.random() * h));
1489+
}
1490+
draw();
1491+
};
1492+
window.addEventListener('load', init(60));
1493+
window.onmousemove = function (e) {
1494+
e = e || window.event;
1495+
current_circle.x = e.clientX;
1496+
current_circle.y = e.clientY;
1497+
};
1498+
window.onmouseout = function () {
1499+
current_circle.x = null;
1500+
current_circle.y = null;
1501+
};
1502+
</script>
14801503
</body>
14811504
</html>

0 commit comments

Comments
 (0)