I'm a open source enthusiast, good at front-end development.
- 🌱 I’m currently working in ant financial
- 🏗 Focus on BI and data visualization
- 💬 WeChat:
AnyPlot
- 📫 Ping me by Email
:cancer: Interactive Particle / Nest System With JavaScript and Canvas, no jQuery.
Home Page: https://git.hust.cc/canvas-nest.js
License: MIT License
I'm a open source enthusiast, good at front-end development.
AnyPlot
提供一个基于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系统实现方案类似
我把nest单独做成一个组件,然后放到我到页面上,发现鼠标在组件的外面区域拖动的时候,里面到线条也会受影响跟着动;把鼠标放到组件区域内时,线条是在离鼠标一定到距离处发生变化,而不是鼠标放在哪里哪里线条就跟着变化
引入是添加zIndex属性,自动变成小写的zindex了,然后不生效
崇拜!
或者至少支持只对特定元素用……
在Webpack里import然后就直接对整个页面生效了= =
建议增加删除所有canvasNest创建的canvas元素。
增加挨个删除canvasNest创建的canvas元素。
描述地址
https://张成林.**/
作者你好,我注意到鼠标不动时,那些线条会聚合成园形,可不可以写一个聚合成心形的,要是喜欢一个妹子,就让她看自己博客,然后,告诉她把鼠标放开一会儿,这表白方式666啊😂
弄了好半天,都没成功。。。作者能看下问题吗
触屏时鼠标不动,很快就聚集在一起了。
我想根据页面的高度来传入count,但是script的标签似乎不能动态赋值,想将js直接迁移进页面代码时发现在js里找不到count这个变量 请问有什么解决办法吗.
我已经在我的博客上加了这个,觉得能不能弄一个随机颜色?(我不是很懂这些东西因此如果这是个不切实际的想法请别喷我QAQ)
看到这个效果很赞,蛮有创意的
做了一回搬运工😀 ,Android移植版: CanvasNestView
打开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
这个背景动画很好玩,但是只能设置开启或关闭,这就导致一个问题,在桌面端的体验很好,但是在移动端就显得十分的渣乱。
想知道可不可以实现根据访问者使用设备情况,只在桌面端开启,移动端自动关闭?
如果可以,如何实现?
动画具体效果可以在桌面端和移动端分别打开我的博客体验
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
请问一下如何设置线条粗细,想稍微粗上一些
好的,谢谢
RT。笔记本,正常情况下占点CPU就算了。但如果没有接通电源还大量占用就很伤了。
或者加个选项,允许控制是否在未接通电源时禁用效果?
在SPA单页中,路由至其他页面依然存在,并且影响页面操作
我在自己的博客上用了你的这个动态效果,发现了一些问题:
一、当线段围在鼠标周围时会干扰阅读,所以我去除了onmousemove 这个函数
window.onmousemove = function(e) {
e = e || window.event;
current_point.x = e.clientX;
current_point.y = e.clientY;
},
二、去除了聚集效果之后,整个屏幕都是飞舞的线条,看着更加难受了,所以我想能否将canvas标签放到
文章的div下面,后来仔细一想发现只要是线条在乱飞就会影响阅读体验,所以我就想能不能做一个自上而下的雪花的下落的效果(作为背景,不能遮挡到文章)
判断鼠标已经连线到N个点,当点数到达N时返回一个任意语句
您好,看了代码以后这一处地方不是很理解:
//绑定事件
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的情况下),会造成死循环。望指教 ^_^
只有我有这种想法吗
可以把点变成半径大大小小随机的圆么 这样效果会更好
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)}();
据说这种方式类似于博客性质
不会拖着小点
楼主好~
发现插件canvas-nest.js在朋友的网页上效果非常赞,就下载到了自己的wordpress上。
但貌似安装插件并正确设置之后,打开网页并没有任何效果。
检查了一下并询问了主题的作者,说是CSS层级有点问题,还麻烦帮忙查一下咯,谢谢了~
P.S 附上网站链接
yiqin.me
I've implemented this in Flutter!
I would appreciate a link in the related projects:
flutter_canvasnest: Implementation in Flutter
# 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
zIndex 属性设置很大,还是被页面的dom挡住了,能显示 ,但是 不能使用
我把canvas-nest.js这一个文件放在hugo的static/js文件夹内,然后在配置文件中添加这个js,最后只显示了非常少量的线条。线条聚集的点也和鼠标位置有偏差。
How do I call this script on a specific DIV tag?
@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();
我尝试使用此代码片段,可是不清楚放在哪里。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.