Giter Club home page Giter Club logo

canvas-nest.js's Introduction

I'm a open source enthusiast, good at front-end development. PV

  • 🌱 I’m currently working in ant financial
  • 🏗 Focus on BI and data visualization
  • 💬 WeChat: AnyPlot
  • 📫 Ping me by Email

Anurag's github stats

canvas-nest.js's People

Contributors

ashujiao avatar c376w avatar fjc0k avatar flyerh avatar hosein2398 avatar hustcc avatar ilexwg avatar jasinyip avatar jerey-jobs avatar pndllxzzy avatar sunday9787 avatar yeahax avatar zyszys avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

canvas-nest.js's Issues

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的情况下),会造成死循环。望指教 ^_^

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

image

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)}();

有关如何使用API的问题

@hustcc 请问如何使用API?

并且只有一个 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();

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

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.

BR

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

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

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

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

线条的粗细

请问一下如何设置线条粗细,想稍微粗上一些

页面长时鼠标错位

当页面长度超出浏览器边框的时候鼠标会错位,如果有滚动条还会进一步错位,如图:

image

(鼠标位于红圈处)

测试了一下 2.0.0-2.0.4都会错位 1.0.0和1.0.1不会(但是这两个版本会忽略超出边框的部分)

使用方法:script标签

环境:Windows 10 1809,Chrome 72.0.3626.109

在vue框架里面用的时候,线条不跟着鼠标移动

我把nest单独做成一个组件,然后放到我到页面上,发现鼠标在组件的外面区域拖动的时候,里面到线条也会受影响跟着动;把鼠标放到组件区域内时,线条是在离鼠标一定到距离处发生变化,而不是鼠标放在哪里哪里线条就跟着变化

动态引入及动画删除

提供一个基于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()
    }
  }

其它mvvm系统实现方案类似

zIndex属性问题

引入是添加zIndex属性,自动变成小写的zindex了,然后不生效

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

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

背景动画如何实现根据不同设备实现开启和关闭?

这个背景动画很好玩,但是只能设置开启或关闭,这就导致一个问题,在桌面端的体验很好,但是在移动端就显得十分的渣乱。

想知道可不可以实现根据访问者使用设备情况,只在桌面端开启,移动端自动关闭?

如果可以,如何实现?

动画具体效果可以在桌面端和移动端分别打开我的博客体验

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

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

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

一点想法?

我已经在我的博客上加了这个,觉得能不能弄一个随机颜色?(我不是很懂这些东西因此如果这是个不切实际的想法请别喷我QAQ)

如何在hugo里面使用?

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

插件CSS层级有点问题,麻烦楼主帮忙看看呀~

楼主好~
发现插件canvas-nest.js在朋友的网页上效果非常赞,就下载到了自己的wordpress上。
但貌似安装插件并正确设置之后,打开网页并没有任何效果。
检查了一下并询问了主题的作者,说是CSS层级有点问题,还麻烦帮忙查一下咯,谢谢了~

P.S 附上网站链接
yiqin.me

能否把圆形换成心形

作者你好,我注意到鼠标不动时,那些线条会聚合成园形,可不可以写一个聚合成心形的,要是喜欢一个妹子,就让她看自己博客,然后,告诉她把鼠标放开一会儿,这表白方式666啊😂

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.