hustcc / canvas-nest.js Goto Github PK

并且只有一个 API，使用如下：
import CanvasNest from 'canvas-nest.js';

const config = {
color: '255,0,0',
count: 88,
};

// 在 element 地方使用 config 渲染效果
const cn = new CanvasNest(element, config);

// destroy
cn.destroy();

我尝试使用此代码片段，可是不清楚放在哪里。

你好，请问怎么样可以动态传入count

我想根据页面的高度来传入count，但是script的标签似乎不能动态赋值，想将js直接迁移进页面代码时发现在js里找不到count这个变量请问有什么解决办法吗.

考虑监测一下是否接通电源？

RT。笔记本，正常情况下占点CPU就算了。但如果没有接通电源还大量占用就很伤了。
或者加个选项，允许控制是否在未接通电源时禁用效果？

A switch to turn off the special effects on mobile

# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

Can you set a switch to close the canvas effect on a mobile device.
Just like this:
https://github.com/EYHN/hexo-helper-live2d/blob/master/index.js#L67

Another issue：
hexojs/hexo#2931

canvas-nest on Android

看到这个效果很赞，蛮有创意的
做了一回搬运工😀 ，Android移植版： CanvasNestView

Next主题中使用新版js 无法全屏动画

https://raw.githubusercontent.com/hustcc/canvas-nest.js/master/dist/canvas-nest.js

旧版js却可以不知道为什么

!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();

源码里看有index.d.ts文件，但yarn或者npm安装是缺少index.d.ts文件的

大佬好

命令
yarn add canvas-nest.js
npm install --save canvas-nest.js

node_modules 里的依赖包

使用typescript会提示需要写声明文件

bindEvent里为什么要写 this.onmousemove && this.onmousemove(e); 这一句呢？

您好，看了代码以后这一处地方不是很理解：

//绑定事件
bindEvent(){
...
this.onmousemove = window.onmousemove;
window.onmousemove = e => {
this.current.x = e.clientX - this.el.offsetLeft + document.scrollingElement.scrollLeft;
this.current.y = e.clientY - this.el.offsetTop + document.scrollingElement.scrollTop;
this.onmousemove && this.onmousemove(e);
};
...
}

为什么要在这里调用一下 this.onmousemove 方法？
我的疑惑是：第一次调用bindEvent，这里的 window.onmousemove是 null，那么这一句不会执行；而如果第二次执行(不先destroy的情况下)，会造成死循环。望指教 ^_^

放到博客园里，只在边缘有效果，#home没有效果有什么解决办法

想基于你的代码框架，做一个雪花飘落的效果

我在自己的博客上用了你的这个动态效果，发现了一些问题：
一、当线段围在鼠标周围时会干扰阅读，所以我去除了onmousemove 这个函数

window.onmousemove = function(e) {
e = e || window.event;
current_point.x = e.clientX;
current_point.y = e.clientY;
},

二、去除了聚集效果之后，整个屏幕都是飞舞的线条，看着更加难受了，所以我想能否将canvas标签放到
文章的div下面，后来仔细一想发现只要是线条在乱飞就会影响阅读体验，所以我就想能不能做一个自上而下的雪花的下落的效果（作为背景，不能遮挡到文章）

如何增加一个判断

判断鼠标已经连线到N个点，当点数到达N时返回一个任意语句

Canvas consume Memory & GPU

I noticed that on my laptop the GPU and the memory is very solicited by the use of the canvas. And so the fans are running at full speed.

There is a way to reduce this consumption, please ?

Thank you for your support and help.

如何在hugo里面使用？

我把canvas-nest.js这一个文件放在hugo的static/js文件夹内，然后在配置文件中添加这个js，最后只显示了非常少量的线条。线条聚集的点也和鼠标位置有偏差。

Implementation in Flutter

I've implemented this in Flutter!

GitHub
Flutter Package
Demo

I would appreciate a link in the related projects:

flutter_canvasnest: Implementation in Flutter

wordpress5.3.2版本安装后没效果，且不能打开settings

打开settings时报错：

Canvas-nest.js Setting

Fatal error: Uncaught ArgumentCountError: Too few arguments to function do_settings_fields(), 1 passed in /www/wwwroot/wordpress/wp-content/plugins/canvas-nestjs/templates/settings.php on line 5 and exactly 2 expected in /www/wwwroot/wordpress/wp-admin/includes/template.php:1667 Stack trace: #0 /www/wwwroot/wordpress/wp-content/plugins/canvas-nestjs/templates/settings.php(5): do_settings_fields('WP_Canvas_Nest-...') #1 /www/wwwroot/wordpress/wp-content/plugins/canvas-nestjs/settings.php(261): include('/www/wwwroot/wo...') #2 /www/wwwroot/wordpress/wp-includes/class-wp-hook.php(288): WP_Canvas_Nest_Settings->plugin_settings_page('') #3 /www/wwwroot/wordpress/wp-includes/class-wp-hook.php(312): WP_Hook->apply_filters('', Array) #4 /www/wwwroot/wordpress/wp-includes/plugin.php(478): WP_Hook->do_action(Array) #5 /www/wwwroot/wordpress/wp-admin/admin.php(254): do_action('settings_page_W...') #6 /www/wwwroot/wordpress/wp-admin/options-general.php(10): require_once('/www/wwwroot/wo...') #7 {main} thrown in /www/wwwroot/wordpress/wp-admin/includes/template.php on line 1667

想問一下顏色能不能改成這樣?

我希望能把顏色改成像這樣的:
https://www.youtube.com/watch?v=MthVGoAINjQ

想問一下是可行的嗎?
如果是可行的話需要做些什麼?

謝謝

How do i call this scrpt on specific DIV tag ?

How do I call this script on a specific DIV tag?

CPU占用略大 & 抖动的问题

动态引入及动画删除

提供一个基于vue的实现方案：

data () {
  return { script: null }
},
created () {
    const script = document.createElement('script')
    script.src = '//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js'
    script.type = 'text/javascript'
    // script.setAttribute('zIndex', 0)
    document.body.appendChild(script)
    this.script = script
  },
  beforeDestroy () {
    const l = document.getElementsByTagName('script')
    const canvasNest = document.getElementById('c_n' + l.length)
    if (canvasNest) {
      canvasNest.remove()
    }
    if (this.script) {
      this.script.remove()
    }
  }