![\"\u7ebf\u6761\u5438\u9644\u9f20\u6807\u7279\u6548\"](\"https:\/\/edgeone.naibabiji.com\/wp-content\/uploads\/2019\/06\/1560150787-canvas-nest-compressor.png\")
<\/a>\u4ee3\u7801\u7248\u4f7f\u7528\u65b9\u6cd5<\/h2>\n\u628a\u4e0b\u9762\u8fd9\u4e32\u4ee3\u7801\u590d\u5236\u4e86\u4fdd\u5b58\u4e3a\u4e00\u4e2ajs\u6587\u4ef6\uff0c\u4f60\u4e5f\u53ef\u4ee5\u76f4\u63a5\u53bbGithub\u4e0b\u8f7d<\/a><\/p>\n \u6ce8\uff1a\u8fd9\u4e2a\u4ee3\u7801\u6240\u6709\u7f51\u7ad9\u90fd\u53ef\u4ee5\u4f7f\u7528\uff0c\u5e76\u975e\u53ea\u6709WordPress\u3002<\/p>\n \u5047\u8bbe\u4f60\u4fdd\u5b58\u7684\u6587\u4ef6\u662fcanvas-nest.js\uff0c\u4e0a\u4f20\u5230\u670d\u52a1\u5668\u7684dist\u6587\u4ef6\u5939\u4e0b\u9762\u7684\u3002<\/p>\n \u7136\u540e\u5728\u4f60WordPress\u7f51\u7ad9\u7684\u9875\u811afooter.php\u6587\u4ef6<\/body>\u4e4b\u524d\u6dfb\u52a0\u4e0b\u9762\u8fd9\u4e32\u4ee3\u7801\u3002<\/p>\n color: \u7ebf\u6761\u989c\u8272, \u9ed8\u8ba4: ‘0,0,0’ \uff1b\u4e09\u4e2a\u6570\u5b57\u5206\u522b\u4e3a(R,G,B)\uff0c\u6ce8\u610f\u7528,\u5206\u5272 \u4f8b\u5982\u4e0b\u9762\u8fd9\u6837<\/p>\n \u6ce8\u610f: \u6240\u6709\u7684\u914d\u7f6e\u9879\u90fd\u6709\u9ed8\u8ba4\u503c\uff0c\u5982\u679c\u4f60\u4e0d\u77e5\u9053\u600e\u4e48\u8bbe\u7f6e\uff0c\u53ef\u4ee5\u5148\u4e0d\u8bbe\u7f6e\u8fd9\u4e9b\u914d\u7f6e\u9879\uff0c\u5c31\u4f7f\u7528\u9ed8\u8ba4\u503c\u770b\u770b\u6548\u679c\u4e5f\u53ef\u4ee5\u7684\u3002<\/p>\n \u5982\u679c\u4f60\u89c9\u5f97\u4ee3\u7801\u7248\u672c\u7684\u5f88\u96be\uff0c\u4f60\u4e5f\u53ef\u4ee5\u4f7f\u7528\u63d2\u4ef6\u7248<\/p>\n canvas-nest.js\u662fgithub\u4e0a\u4e00\u4e2a\u5f88\u70ab\u9177\u7684\u5f00\u6e90\u9879\u76ee\uff0c\u9879\u76ee\u4f7f\u7528\u4e0d\u52302kb\u7684Javascript\u4ee3\u7801\u6784\u9020\u4e00\u4e2a\u5f88\u70ab\u9177\u7684\u7f51\u9875\u80cc\u666f\u6548\u679c\uff0c\u9879\u76ee\u5730\u5740\u4e3a\uff1ahttps:\/\/github.com\/aTool-org\/canvas-nest.js<\/p>\n \u672cwordpress\u63d2\u4ef6\u662f\u5229\u7528\u4e0a\u8ff0\u9879\u76ee\u5b8c\u6210\u7684\u53e6\u5916\u4e00\u4e2a\u5f00\u6e90\u9879\u76ee\uff08https:\/\/github.com\/aTool-org\/canvas-nest-for-wp\uff09\uff0c\u8fd9\u4e2a\u9879\u76ee\u662f\u4e00\u4e2awordpress\u63d2\u4ef6\uff0c\u5e76\u4e14\u53d1\u5e03\u5230wordpress.org\u5b98\u7f51\u4e0a\u3002<\/p>\n \u63d2\u4ef6\u4e0b\u8f7d\u5730\u5740\uff1ahttps:\/\/wordpress.org\/plugins\/canvas-nestjs\/<\/a><\/p>\n \u9664\u4e86\u7f51\u9875\u80cc\u666f\u7279\u6548\u5916\uff0c\u4f60\u53ef\u80fd\u4e5f\u6ce8\u610f\u5230\u672c\u535a\u5ba2\u8bc4\u8bba\u533a\u6253\u5b57\u6709\u70df\u82b1\u7279\u6548\uff0c\u6ca1\u6ce8\u610f\u7684\u8bdd\u4f60\u53ef\u4ee5\u53bb\u8bc4\u8bba\u8bd5\u8bd5\u770b\u3002<\/p>\n \u5b9e\u73b0\u65b9\u6cd5\u5f88\u7b80\u5355\uff0c\u53c2\u89c1\uff1aWordPress\u8bc4\u8bba\u754c\u9762\u6dfb\u52a0\u70df\u82b1????\u6548\u679c<\/a><\/p>\n\n\n!function(){\"use strict\";function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,\"default\")?e.default:e}function t(e,t){return e(t={exports:{}},t.exports),t.exports}var n=t(function(e,t){Object.defineProperty(t,\"__esModule\",{value:!0});var n=1;t.default=function(){return\"\"+n++},e.exports=t.default});e(n);var o=t(function(e,t){Object.defineProperty(t,\"__esModule\",{value:!0}),t.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,n=null;return function(){for(var o=this,i=arguments.length,r=Array(i),a=0;a<i;a++)r[a]=arguments[a];clearTimeout(n),n=setTimeout(function(){e.apply(o,r)},t)}},e.exports=t.default});e(o);var i=t(function(e,t){Object.defineProperty(t,\"__esModule\",{value:!0});t.SizeSensorId=\"size-sensor-id\",t.SensorStyle=\"display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1;opacity:0\",t.SensorClassName=\"size-sensor-object\"});e(i);i.SizeSensorId,i.SensorStyle,i.SensorClassName;var r=t(function(e,t){Object.defineProperty(t,\"__esModule\",{value:!0}),t.createSensor=void 0;var n,r=(n=o)&&n.__esModule?n:{default:n};t.createSensor=function(e){var t=void 0,n=[],o=(0,r.default)(function(){n.forEach(function(t){t(e)})}),a=function(){t&&t.parentNode&&(t.contentDocument.defaultView.removeEventListener(\"resize\",o),t.parentNode.removeChild(t),t=void 0,n=[])};return{element:e,bind:function(r){t||(t=function(){\"static\"===getComputedStyle(e).position&&(e.style.position=\"relative\");var t=document.createElement(\"object\");return t.onload=function(){t.contentDocument.defaultView.addEventListener(\"resize\",o),o()},t.setAttribute(\"style\",i.SensorStyle),t.setAttribute(\"class\",i.SensorClassName),t.type=\"text\/html\",e.appendChild(t),t.data=\"about:blank\",t}()),-1===n.indexOf(r)&&n.push(r)},destroy:a,unbind:function(e){var o=n.indexOf(e);-1!==o&&n.splice(o,1),0===n.length&&t&&a()}}}});e(r);r.createSensor;var a=t(function(e,t){Object.defineProperty(t,\"__esModule\",{value:!0}),t.createSensor=void 0;var n,i=(n=o)&&n.__esModule?n:{default:n};t.createSensor=function(e){var t=void 0,n=[],o=(0,i.default)(function(){n.forEach(function(t){t(e)})}),r=function(){t.disconnect(),n=[],t=void 0};return{element:e,bind:function(i){t||(t=function(){var t=new ResizeObserver(o);return t.observe(e),o(),t}()),-1===n.indexOf(i)&&n.push(i)},destroy:r,unbind:function(e){var o=n.indexOf(e);-1!==o&&n.splice(o,1),0===n.length&&t&&r()}}}});e(a);a.createSensor;var s=t(function(e,t){Object.defineProperty(t,\"__esModule\",{value:!0}),t.createSensor=void 0;t.createSensor=\"undefined\"!=typeof ResizeObserver?a.createSensor:r.createSensor});e(s);s.createSensor;var u=t(function(e,t){Object.defineProperty(t,\"__esModule\",{value:!0}),t.removeSensor=t.getSensor=void 0;var o,r=(o=n)&&o.__esModule?o:{default:o};var a={};t.getSensor=function(e){var t=e.getAttribute(i.SizeSensorId);if(t&&a[t])return a[t];var n=(0,r.default)();e.setAttribute(i.SizeSensorId,n);var o=(0,s.createSensor)(e);return a[n]=o,o},t.removeSensor=function(e){var t=e.element.getAttribute(i.SizeSensorId);e.element.removeAttribute(i.SizeSensorId),e.destroy(),t&&a[t]&&delete a[t]}});e(u);u.removeSensor,u.getSensor;var c=t(function(e,t){Object.defineProperty(t,\"__esModule\",{value:!0}),t.clear=t.bind=void 0;t.bind=function(e,t){var n=(0,u.getSensor)(e);return n.bind(t),function(){n.unbind(t)}},t.clear=function(e){var t=(0,u.getSensor)(e);(0,u.removeSensor)(t)}});e(c);var l=c.clear,d=c.bind,v=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(e){return window.setTimeout(e,1e3\/60)},f=window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.msCancelAnimationFrame||window.oCancelAnimationFrame||window.clearTimeout,m=function(e){return new Array(e).fill(0).map(function(e,t){return t})},h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},p=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,\"value\"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}();var y=function(){function e(t,n){var o=this;!function(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}(this,e),this.randomPoints=function(){return m(o.c.count).map(function(){return{x:Math.random()*o.canvas.width,y:Math.random()*o.canvas.height,xa:2*Math.random()-1,ya:2*Math.random()-1,max:6e3}})},this.el=t,this.c=h({zIndex:-1,opacity:.5,color:\"0,0,0\",pointColor:\"0,0,0\",count:99},n),this.canvas=this.newCanvas(),this.context=this.canvas.getContext(\"2d\"),this.points=this.randomPoints(),this.current={x:null,y:null,max:2e4},this.all=this.points.concat([this.current]),this.bindEvent(),this.requestFrame(this.drawCanvas)}return p(e,[{key:\"bindEvent\",value:function(){var e=this;d(this.el,function(){e.canvas.width=e.el.clientWidth,e.canvas.height=e.el.clientHeight}),this.onmousemove=window.onmousemove,window.onmousemove=function(t){e.current.x=t.clientX-e.el.offsetLeft+document.scrollingElement.scrollLeft,e.current.y=t.clientY-e.el.offsetTop+document.scrollingElement.scrollTop,e.onmousemove&&e.onmousemove(t)},this.onmouseout=window.onmouseout,window.onmouseout=function(){e.current.x=null,e.current.y=null,e.onmouseout&&e.onmouseout()}}},{key:\"newCanvas\",value:function(){\"static\"===getComputedStyle(this.el).position&&(this.el.style.position=\"relative\");var e,t=document.createElement(\"canvas\");return t.style.cssText=\"display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:\"+(e=this.c).zIndex+\";opacity:\"+e.opacity,t.width=this.el.clientWidth,t.height=this.el.clientHeight,this.el.appendChild(t),t}},{key:\"requestFrame\",value:function(e){var t=this;this.tid=v(function(){return e.call(t)})}},{key:\"drawCanvas\",value:function(){var e=this,t=this.context,n=this.canvas.width,o=this.canvas.height,i=this.current,r=this.points,a=this.all;t.clearRect(0,0,n,o);var s=void 0,u=void 0,c=void 0,l=void 0,d=void 0,v=void 0;r.forEach(function(r,f){for(r.x+=r.xa,r.y+=r.ya,r.xa*=r.x>n||r.x<0?-1:1,r.ya*=r.y>o||r.y<0?-1:1,t.fillStyle=\"rgba(\"+e.c.pointColor+\")\",t.fillRect(r.x-.5,r.y-.5,1,1),u=f+1;u<a.length;u++)null!==(s=a[u]).x&&null!==s.y&&(l=r.x-s.x,d=r.y-s.y,(v=l*l+d*d)<s.max&&(s===i&&v>=s.max\/2&&(r.x-=.03*l,r.y-=.03*d),c=(s.max-v)\/s.max,t.beginPath(),t.lineWidth=c\/2,t.strokeStyle=\"rgba(\"+e.c.color+\",\"+(c+.2)+\")\",t.moveTo(r.x,r.y),t.lineTo(s.x,s.y),t.stroke()))}),this.requestFrame(this.drawCanvas)}},{key:\"destroy\",value:function(){l(this.el),window.onmousemove=this.onmousemove,window.onmouseout=this.onmouseout,f(this.tid),this.canvas.parentNode.removeChild(this.canvas)}}]),e}();y.version=\"2.0.4\";var w,b;new y(document.body,(w=document.getElementsByTagName(\"script\"),{zIndex:(b=w[w.length-1]).getAttribute(\"zIndex\"),opacity:b.getAttribute(\"opacity\"),color:b.getAttribute(\"color\"),pointColor:b.getAttribute(\"pointColor\"),count:Number(b.getAttribute(\"count\"))||99}))}();<\/pre>\n<script<\/span> type<\/span>=\"<\/span>text\/javascript\"<\/span><\/span> src<\/span>=\"<\/span>dist\/canvas-nest.js\"<\/span><\/span>><\/script<\/span>><\/pre>\n\u81ea\u5b9a\u4e49\u663e\u793a\u6548\u679c<\/h2>\n
\npointColor: \u4ea4\u70b9\u989c\u8272, \u9ed8\u8ba4: ‘0,0,0’ \uff1b\u4e09\u4e2a\u6570\u5b57\u5206\u522b\u4e3a(R,G,B)\uff0c\u6ce8\u610f\u7528,\u5206\u5272
\nopacity: \u7ebf\u6761\u900f\u660e\u5ea6\uff080~1\uff09, \u9ed8\u8ba4: 0.5
\ncount: \u7ebf\u6761\u7684\u603b\u6570\u91cf, \u9ed8\u8ba4: 150
\nzIndex: \u80cc\u666f\u7684z-index\u5c5e\u6027\uff0ccss\u5c5e\u6027\u7528\u4e8e\u63a7\u5236\u6240\u5728\u5c42\u7684\u4f4d\u7f6e, \u9ed8\u8ba4: -1<\/p>\n<script type=\"text\/javascript\" color=\"0,0,255\" opacity='0.7' zIndex=\"-2\" count=\"99\" src=\"dist\/canvas-nest.js\"><\/script><\/pre>\n
WordPress Canvas\u63d2\u4ef6\u4e0b\u8f7d<\/h2>\n
<\/p>\n\u7ed9\u8bc4\u8bba\u533a\u6dfb\u52a0\u6253\u5b57\u70df\u82b1\u6548\u679c<\/h2>\n