Skip to content

Commit 27c850d

Browse files
hefuyicoderhefuyicoder
committed
Site updated: 2017-05-08 18:21:55
1 parent ce5cd6a commit 27c850d

File tree

18 files changed

+2142
-1
lines changed

18 files changed

+2142
-1
lines changed

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

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,37 @@ <h1 class="post-title" itemprop="name headline">听听，一款优雅的开源
420420

421421

422422

423+
<div class="post-wordcount">
424+
425+
<span class="post-meta-divider">|</span>
426+
<span class="post-meta-item-icon">
427+
<i class="fa fa-file-word-o"></i>
428+
</span>
429+
430+
<span class="post-meta-item-text">字数统计</span>
431+
432+
<span title="字数统计">
433+
699
434+
</span>
435+
436+
437+
438+
<span class="post-meta-divider">|</span>
439+
440+
441+
442+
<span class="post-meta-item-icon">
443+
<i class="fa fa-clock-o"></i>
444+
</span>
445+
446+
<span class="post-meta-item-text">阅读时长</span>
447+
448+
<span title="阅读时长">
449+
3
450+
</span>
451+
452+
</div>
453+
423454

424455

425456

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

802833

803834

835+
836+
804837

805838

806839

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

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

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

833869

834870

@@ -1331,5 +1367,115 @@ <h3 id="Contact-Me"><a href="#Contact-Me" class="headerlink" title="Contact Me">
13311367

13321368

13331369

1370+
1371+
<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();
1408+
}
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])
1451+
}
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])
1457+
}
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>
1478+
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>
13341480
</body>
13351481
</html>

‎2017/04/27/Glide源码解析（一）：加载流程/index.html

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -417,6 +417,37 @@ <h1 class="post-title" itemprop="name headline">Glide源码解析（一）：加
417417

418418

419419

420+
<div class="post-wordcount">
421+
422+
<span class="post-meta-divider">|</span>
423+
<span class="post-meta-item-icon">
424+
<i class="fa fa-file-word-o"></i>
425+
</span>
426+
427+
<span class="post-meta-item-text">字数统计</span>
428+
429+
<span title="字数统计">
430+
13,775
431+
</span>
432+
433+
434+
435+
<span class="post-meta-divider">|</span>
436+
437+
438+
439+
<span class="post-meta-item-icon">
440+
<i class="fa fa-clock-o"></i>
441+
</span>
442+
443+
<span class="post-meta-item-text">阅读时长</span>
444+
445+
<span title="阅读时长">
446+
68
447+
</span>
448+
449+
</div>
450+
420451

421452

422453

@@ -975,6 +1006,8 @@ <h4 id="into"><a href="#into" class="headerlink" title="into"></a>into</h4><p>
9751006

9761007

9771008

1009+
1010+
9781011

9791012

9801013

@@ -1003,6 +1036,9 @@ <h4 id="into"><a href="#into" class="headerlink" title="into"></a>into</h4><p>
10031036

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

1039+
1040+
<script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
1041+
10061042

10071043

10081044

@@ -1505,5 +1541,115 @@ <h4 id="into"><a href="#into" class="headerlink" title="into"></a>into</h4><p>
15051541

15061542

15071543

1544+
1545+
<script>
1546+
class Circle {
1547+
//创建对象
1548+
//以一个圆为对象
1549+
//设置随机的 x，y坐标，r半径，_mx，_my移动的距离
1550+
//this.r是创建圆的半径，参数越大半径越大
1551+
//this._mx,this._my是移动的距离，参数越大移动
1552+
constructor(x, y) {
1553+
this.x = x;
1554+
this.y = y;
1555+
this.r = Math.random() * 10 ;
1556+
this._mx = Math.random() ;
1557+
this._my = Math.random() ;
1558+
}
1559+
//canvas 画圆和画直线
1560+
//画圆就是正常的用canvas画一个圆
1561+
//画直线是两个圆连线，为了避免直线过多，给圆圈距离设置了一个值，距离很远的圆圈，就不做连线处理
1562+
drawCircle(ctx) {
1563+
ctx.beginPath();
1564+
//arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。
1565+
ctx.arc(this.x, this.y, this.r, 0, 360)
1566+
ctx.closePath();
1567+
ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
1568+
ctx.fill();
1569+
}
1570+
drawLine(ctx, _circle) {
1571+
let dx = this.x - _circle.x;
1572+
let dy = this.y - _circle.y;
1573+
let d = Math.sqrt(dx * dx + dy * dy)
1574+
if (d < 150) {
1575+
ctx.beginPath();
1576+
//开始一条路径，移动到位置 this.x,this.y。创建到达位置 _circle.x,_circle.y 的一条线：
1577+
ctx.moveTo(this.x, this.y); //起始点
1578+
ctx.lineTo(_circle.x, _circle.y); //终点
1579+
ctx.closePath();
1580+
ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
1581+
ctx.stroke();
1582+
}
1583+
}
1584+
// 圆圈移动
1585+
// 圆圈移动的距离必须在屏幕范围内
1586+
move(w, h) {
1587+
this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
1588+
this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
1589+
this.x += this._mx / 2;
1590+
this.y += this._my / 2;
1591+
}
1592+
}
1593+
//鼠标点画圆闪烁变动
1594+
class currentCirle extends Circle {
1595+
constructor(x, y) {
1596+
super(x, y)
1597+
}
1598+
drawCircle(ctx) {
1599+
ctx.beginPath();
1600+
//注释内容为鼠标焦点的地方圆圈半径变化
1601+
//this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
1602+
this.r = 8;
1603+
ctx.arc(this.x, this.y, this.r, 0, 360);
1604+
ctx.closePath();
1605+
//ctx.fillStyle = 'rgba(0,0,0,' + (parseInt(Math.random() * 100) / 100) + ')'
1606+
ctx.fillStyle = 'rgba(255, 77, 54, 0.3)'
1607+
ctx.fill();
1608+
}
1609+
}
1610+
//更新页面用requestAnimationFrame替代setTimeout
1611+
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
1612+
let canvas = document.getElementById('canvas');
1613+
let ctx = canvas.getContext('2d');
1614+
let w = canvas.width = canvas.offsetWidth;
1615+
let h = canvas.height = canvas.offsetHeight;
1616+
let circles = [];
1617+
let current_circle = new currentCirle(0, 0)
1618+
let draw = function () {
1619+
ctx.clearRect(0, 0, w, h);
1620+
for (let i = 0; i < circles.length; i++) {
1621+
circles[i].move(w, h);
1622+
circles[i].drawCircle(ctx);
1623+
for (j = i + 1; j < circles.length; j++) {
1624+
circles[i].drawLine(ctx, circles[j])
1625+
}
1626+
}
1627+
if (current_circle.x) {
1628+
current_circle.drawCircle(ctx);
1629+
for (var k = 1; k < circles.length; k++) {
1630+
current_circle.drawLine(ctx, circles[k])
1631+
}
1632+
}
1633+
requestAnimationFrame(draw)
1634+
}
1635+
let init = function (num) {
1636+
for (var i = 0; i < num; i++) {
1637+
circles.push(new Circle(Math.random() * w, Math.random() * h));
1638+
}
1639+
draw();
1640+
}
1641+
window.addEventListener('load', init(60));
1642+
window.onmousemove = function (e) {
1643+
e = e || window.event;
1644+
current_circle.x = e.clientX;
1645+
current_circle.y = e.clientY;
1646+
}
1647+
window.onmouseout = function () {
1648+
current_circle.x = null;
1649+
current_circle.y = null;
1650+
};
1651+
</script>
1652+
1653+
<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>
15081654
</body>
15091655
</html>

0 commit comments

Comments
 (0)