Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit27c850d

Browse files
committed
Site updated: 2017-05-08 18:21:55
1 parentce5cd6a commit27c850d

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+
<divclass="post-wordcount">
424+
425+
<spanclass="post-meta-divider">|</span>
426+
<spanclass="post-meta-item-icon">
427+
<iclass="fa fa-file-word-o"></i>
428+
</span>
429+
430+
<spanclass="post-meta-item-text">字数统计</span>
431+
432+
<spantitle="字数统计">
433+
699
434+
</span>
435+
436+
437+
438+
<spanclass="post-meta-divider">|</span>
439+
440+
441+
442+
<spanclass="post-meta-item-icon">
443+
<iclass="fa fa-clock-o"></i>
444+
</span>
445+
446+
<spanclass="post-meta-item-text">阅读时长</span>
447+
448+
<spantitle="阅读时长">
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
<scripttype="text/javascript"src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
831864

865+
866+
<scripttype="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+
classCircle{
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+
letdx=this.x-_circle.x;
1398+
letdy=this.y-_circle.y;
1399+
letd=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+
classcurrentCirleextendsCircle{
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+
letcanvas=document.getElementById('canvas');
1439+
letctx=canvas.getContext('2d');
1440+
letw=canvas.width=canvas.offsetWidth;
1441+
leth=canvas.height=canvas.offsetHeight;
1442+
letcircles=[];
1443+
letcurrent_circle=newcurrentCirle(0,0)
1444+
letdraw=function(){
1445+
ctx.clearRect(0,0,w,h);
1446+
for(leti=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(vark=1;k<circles.length;k++){
1456+
current_circle.drawLine(ctx,circles[k])
1457+
}
1458+
}
1459+
requestAnimationFrame(draw)
1460+
}
1461+
letinit=function(num){
1462+
for(vari=0;i<num;i++){
1463+
circles.push(newCircle(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+
<ahref="https://github.com/hefuyicoder"><imgstyle="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+
<divclass="post-wordcount">
421+
422+
<spanclass="post-meta-divider">|</span>
423+
<spanclass="post-meta-item-icon">
424+
<iclass="fa fa-file-word-o"></i>
425+
</span>
426+
427+
<spanclass="post-meta-item-text">字数统计</span>
428+
429+
<spantitle="字数统计">
430+
13,775
431+
</span>
432+
433+
434+
435+
<spanclass="post-meta-divider">|</span>
436+
437+
438+
439+
<spanclass="post-meta-item-icon">
440+
<iclass="fa fa-clock-o"></i>
441+
</span>
442+
443+
<spanclass="post-meta-item-text">阅读时长</span>
444+
445+
<spantitle="阅读时长">
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
<scripttype="text/javascript"src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
10051038

1039+
1040+
<scripttype="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+
classCircle{
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+
letdx=this.x-_circle.x;
1572+
letdy=this.y-_circle.y;
1573+
letd=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+
classcurrentCirleextendsCircle{
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+
letcanvas=document.getElementById('canvas');
1613+
letctx=canvas.getContext('2d');
1614+
letw=canvas.width=canvas.offsetWidth;
1615+
leth=canvas.height=canvas.offsetHeight;
1616+
letcircles=[];
1617+
letcurrent_circle=newcurrentCirle(0,0)
1618+
letdraw=function(){
1619+
ctx.clearRect(0,0,w,h);
1620+
for(leti=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(vark=1;k<circles.length;k++){
1630+
current_circle.drawLine(ctx,circles[k])
1631+
}
1632+
}
1633+
requestAnimationFrame(draw)
1634+
}
1635+
letinit=function(num){
1636+
for(vari=0;i<num;i++){
1637+
circles.push(newCircle(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+
<ahref="https://github.com/hefuyicoder"><imgstyle="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)
[8]ページ先頭
©2009-2025 Movatter.jp