为博客添加canvas-nest.js(有BUG)

看到我的博客背景了吗?

它会动椰~ 会连成一条线耶!好好玩~

好看吗??????

-————————————————

好了好了不扯了。

背景动态使用的是canvas-nest.js

下面我把代码放出来

<script type="text/javascript" color="0,0,180" opacity='0.7' zIndex="-2" count="450" src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js"></script>

ps:使用cdnjs.net BootCDN抽风了 ssl证书错误

我来说一下参数


    color: 线条颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用,分割
    pointColor: 交点颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用,分割
    opacity: 线条透明度(0~1), 默认: 0.5
    count: 线条的总数量, 默认: 150 //1000000个会怎么样(跑
    zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

我来推荐个网站可以设置RGbbbbbbbbbbbbbbbbbb

https://m.fontke.com/tool/rgb/00b400/

如何在WP中使用呢?

如果你百度的话会搜到

为博客添加canvas-nest.js(有BUG)插图

以及的github一个wp插件项目,

在Gayhub上

但是经过我测试

插件有问题啊 报错

还是老老实实的插入吧。。。

——————————————————————

首先

赶紧去下载这个插件:

Insert Headers and Footers

安装好后去设置

会看到这样的界面:

为博客添加canvas-nest.js(有BUG)插图(2)

代码是放上面还是下面?

ps:肯定是放上面

<span class="heimu" title="没毛病">放下面哦</span>

就像这样:

为博客添加canvas-nest.js(有BUG)插图(4)

我说了是放上面对吧

填写完成上面的后就可以看到这样的界面了

哦好多点,哦连成一条线了。。

为博客添加canvas-nest.js(有BUG)插图(6)

好了我凑字数凑完了

官方文档:https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md

补充!:(我用的代码)

<script type="text/javascript">
	var system ={};  
   var p = navigator.platform;       
   system.win = p.indexOf("Win") == 0;  
   system.mac = p.indexOf("Mac") == 0;  
   system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);     
	if(system.win||system.mac||system.xll){//如果是电脑
		document.write('<script type="text/javascript" color="233,108,180" zIndex="-2" count="200" src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js"><\/script>'); 
        console.log("检测到是电脑执行加载canvas-nest.js By:呵呵君"); 
   }else{  //如果是手机
		console.log("检测到是手机不执行加载canvas-nest.js By:呵呵君");
   }
</script>

因为我发现我的主题手机端与canvas-nest.js发生冲突 所以写了一个判断语句

对樱花主题有效!

评论

  1. i-info
    i-info
    Windows Chrome 80.0.3987.116

    好玩! {{koubi}}

    6月前
    2020-2-24 14:57:01

发送评论 编辑评论

上一篇
下一篇