|
101 | 101 |
|
102 | 102 |
|
103 | 103 |
|
104 | | -<linkrel="shortcut icon"type="image/x-icon"href="/favicon.ico?v=5.1.1"/> |
| 104 | +<linkrel="shortcut icon"type="image/x-icon"href="/images/favicon.ico?v=5.1.1"/> |
105 | 105 |
|
106 | 106 |
|
107 | 107 |
|
@@ -832,8 +832,6 @@ <h3 id="Contact-Me"><a href="#Contact-Me" class="headerlink" title="Contact Me"> |
832 | 832 |
|
833 | 833 |
|
834 | 834 |
|
835 | | - |
836 | | - |
837 | 835 |
|
838 | 836 |
|
839 | 837 |
|
@@ -862,9 +860,6 @@ <h3 id="Contact-Me"><a href="#Contact-Me" class="headerlink" title="Contact Me"> |
862 | 860 |
|
863 | 861 | <scripttype="text/javascript"src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script> |
864 | 862 |
|
865 | | - |
866 | | -<scripttype="text/javascript"src="/lib/canvas-nest/canvas-nest.min.js"></script> |
867 | | - |
868 | 863 |
|
869 | 864 |
|
870 | 865 |
|
@@ -1369,113 +1364,141 @@ <h3 id="Contact-Me"><a href="#Contact-Me" class="headerlink" title="Contact Me"> |
1369 | 1364 |
|
1370 | 1365 |
|
1371 | 1366 | <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(); |
| 1367 | +'use strict'; |
| 1368 | + |
| 1369 | +var_createClass=function(){functiondefineProperties(target,props){for(vari=0;i<props.length;i++){vardescriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"indescriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}returnfunction(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);returnConstructor;};}(); |
| 1370 | + |
| 1371 | +function_possibleConstructorReturn(self,call){if(!self){thrownewReferenceError("this hasn't been initialised - super() hasn't been called");}returncall&&(typeofcall==="object"||typeofcall==="function") ?call :self;} |
| 1372 | + |
| 1373 | +function_inherits(subClass,superClass){if(typeofsuperClass!=="function"&&superClass!==null){thrownewTypeError("Super expression must either be null or a function, not "+typeofsuperClass);}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(!(instanceinstanceofConstructor)){thrownewTypeError("Cannot call a class as a function");}} |
| 1376 | + |
| 1377 | +varCircle=function(){ |
| 1378 | +functionCircle(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(); |
1408 | 1386 | } |
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]) |
| 1387 | + |
| 1388 | +_createClass(Circle,[{ |
| 1389 | +key:'drawCircle', |
| 1390 | +value:functiondrawCircle(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:functiondrawLine(ctx,_circle){ |
| 1401 | +vardx=this.x-_circle.x; |
| 1402 | +vardy=this.y-_circle.y; |
| 1403 | +vard=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:functionmove(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 | +returnCircle; |
| 1427 | +}(); |
| 1428 | + |
| 1429 | + |
| 1430 | + |
| 1431 | +varcurrentCirle=function(_Circle){ |
| 1432 | +_inherits(currentCirle,_Circle); |
| 1433 | + |
| 1434 | +functioncurrentCirle(x,y){ |
| 1435 | +_classCallCheck(this,currentCirle); |
| 1436 | + |
| 1437 | +return_possibleConstructorReturn(this,(currentCirle.__proto__||Object.getPrototypeOf(currentCirle)).call(this,x,y)); |
1451 | 1438 | } |
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]) |
| 1439 | + |
| 1440 | +_createClass(currentCirle,[{ |
| 1441 | +key:'drawCircle', |
| 1442 | +value:functiondrawCircle(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 | +returncurrentCirle; |
| 1456 | +}(Circle); |
| 1457 | + |
| 1458 | + |
| 1459 | +window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame; |
| 1460 | + |
| 1461 | +varcanvas=document.getElementById('canvas'); |
| 1462 | +varctx=canvas.getContext('2d'); |
| 1463 | +varw=canvas.width=canvas.offsetWidth; |
| 1464 | +varh=canvas.height=canvas.offsetHeight; |
| 1465 | +varcircles=[]; |
| 1466 | +varcurrent_circle=newcurrentCirle(0,0); |
| 1467 | + |
| 1468 | +vardraw=functiondraw(){ |
| 1469 | +ctx.clearRect(0,0,w,h); |
| 1470 | +for(vari=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 | +} |
1457 | 1476 | } |
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> |
| 1477 | +if(current_circle.x){ |
| 1478 | +current_circle.drawCircle(ctx); |
| 1479 | +for(vark=1;k<circles.length;k++){ |
| 1480 | +current_circle.drawLine(ctx,circles[k]); |
| 1481 | +} |
| 1482 | +} |
| 1483 | +requestAnimationFrame(draw); |
| 1484 | +}; |
1478 | 1485 |
|
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> |
| 1486 | +varinit=functioninit(num){ |
| 1487 | +for(vari=0;i<num;i++){ |
| 1488 | +circles.push(newCircle(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> |
1480 | 1503 | </body> |
1481 | 1504 | </html> |