canvas鼠标移动动态星空背景特效
2017-05-03 14:06
633 查看
在网上发现了一个挺好玩的canvas背景特效,先放上效果图。
这个可以作为背景,里面是直线匀速运动的散点,当两个点直接小于一定距离时会通过canvas生成一条线相连接。
而且当鼠标移入时,鼠标指针一定范围内的点会和鼠标相连接,从而控制散点移动。总的来说还是很好玩的。
接下来是介绍怎么使用。
canvas-nest .js下载链接:canvas-nest.js
这个特效的使用方法很简单,只需要引用canvas-nest .js这个文件就可以了,它会创建一个canvas标签并插入到body里面,默认是fixed定位。
下面canvas-nest.js的代码,我来注释说明一下几个常用参数,由于本人对canvas研究不多所以其它的参数如果有兴趣可以自己研究一下,当我们使用的时候可以根据需要稍微修改一下源代码:
这个可以作为背景,里面是直线匀速运动的散点,当两个点直接小于一定距离时会通过canvas生成一条线相连接。
而且当鼠标移入时,鼠标指针一定范围内的点会和鼠标相连接,从而控制散点移动。总的来说还是很好玩的。
接下来是介绍怎么使用。
canvas-nest .js下载链接:canvas-nest.js
这个特效的使用方法很简单,只需要引用canvas-nest .js这个文件就可以了,它会创建一个canvas标签并插入到body里面,默认是fixed定位。
下面canvas-nest.js的代码,我来注释说明一下几个常用参数,由于本人对canvas研究不多所以其它的参数如果有兴趣可以自己研究一下,当我们使用的时候可以根据需要稍微修改一下源代码:
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),//这里作为背景设置index:-1 o: o(v, "opacity", 0.5), c: o(v, "color", "15,136,235"),//两点之间连线的颜色 n: o(v, "count", 299)//整个屏幕里面散点的数量 } } function k() {//这里设置了canvas的宽和高为屏幕的宽和高 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);//将canvas元素插入的body里 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 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
- 一个背景云变换js特效 鼠标移动背景云变化
- 一个背景云变换js特效 鼠标移动背景云变化
- [Html5 canvas]鼠标悬停吸附粒子背景特效
- 简单背景图片,鼠标移动特效
- [MFC]SDI在图片背景上实现文本跟随鼠标移动
- 【实例】html5-canvas中实现背景图片的移动
- 鼠标移动更改图片背景
- js根据鼠标移动速度背景图片自动旋转的方法
- Canvas 鼠标事件 无效——没有定义背景颜色,即是透明色,无法触发MouseLeftButtonDown事件
- 背景图跟随鼠标移动的Mootools插件实现代码
- C#中,当鼠标移动到控件上,动态显示提示内容 -> 用代码操作ToolTip
- 关于使用div img canvas map,area打造鼠标移动上去变色的方法
- 随鼠标移动的图片或文字特效代码
- 网站导航标题栏下面有一小色块跟随鼠标移动,同时色块颜色改变的特效
- 给超链接添加特效鼠标移动展示提示信息且随鼠标移动
- DataGrid和GridView鼠标移动上面背景变色
- qt4.8.4 QWidget 随鼠标移动 与 背景设置
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)