js动态背景

1.将下面的代码复制并存为js文件

window.onload = function () {//定义body的margin由默认值8px->0pxdocument.body.style.margin = "0";document.body.style.background = "#30333F";//创建canvas画布document.body.appendChild(document.createElement('canvas'));var canvas = document.querySelector('canvas'),ctx = canvas.getContext('2d') //ctx返回一个在canvas上画图的api/domcanvas.width = window.innerWidth;canvas.height = window.innerHeight;canvas.style.position = 'fixed';ctx.lineWidth = .3;ctx.strokeStyle = (new Color(150)).style;//定义鼠标覆盖范围var mousePosition = {x: 30 * canvas.width / 100,y: 30 * canvas.height / 100};var dots = {nb: 1000,//Dot的总数distance: 50,d_radius: 100,array: []};//创建颜色类，Color类返回字符串型rgba（*,*,*,.8）function mixComponents(comp1, weight1, comp2, weight2) {return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);}function averageColorStyles(dot1, dot2) {var color1 = dot1.color,color2 = dot2.color;var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));}function colorValue(min) {return Math.floor(Math.random() * 255 + min);}function createColorStyle(r, g, b) {return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';}function Color(min) {min = min || 0;this.r = colorValue(min);this.g = colorValue(min);this.b = colorValue(min);this.style = createColorStyle(this.r, this.g, this.b);}//创建Dot类以及一系列方法function Dot() {this.x = Math.random() * canvas.width;this.y = Math.random() * canvas.height;this.vx = -.5 + Math.random();this.vy = -.5 + Math.random();this.radius = Math.random() * 2;this.color = new Color();}Dot.prototype = {draw: function () {ctx.beginPath();ctx.fillStyle = this.color.style;ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);ctx.fill();}};function moveDots() {//Dot对象的移动for (i = 0; i < dots.nb; i++) {var dot = dots.array[i];if (dot.y < 0 || dot.y > canvas.height) {dot.vx = dot.vx;dot.vy = - dot.vy;}else if (dot.x < 0 || dot.x > canvas.width) {dot.vx = - dot.vx;dot.vy = dot.vy;}dot.x += dot.vx;dot.y += dot.vy;}}function connectDots() {//DOt对象的连接for (i = 0; i < dots.nb; i++) {for (j = i; j < dots.nb; j++) {i_dot = dots.array[i];j_dot = dots.array[j];if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance) {if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius) {ctx.beginPath();ctx.strokeStyle = averageColorStyles(i_dot, j_dot);ctx.moveTo(i_dot.x, i_dot.y);ctx.lineTo(j_dot.x, j_dot.y);ctx.stroke();//绘制定义的路线ctx.closePath();//创建从当前点回到起始点的路径}}}}}function createDots() {//创建nb个Dot对象for (i = 0; i < dots.nb; i++) {dots.array.push(new Dot());}}function drawDots() {//引用Dot原型链，使用draw方法，在canvas上画出Dot对象for (i = 0; i < dots.nb; i++) {var dot = dots.array[i];dot.draw();}}function animateDots() {ctx.clearRect(0, 0, canvas.width, canvas.height);//清除画布，否则线条会连在一起moveDots();connectDots();drawDots();requestAnimationFrame(animateDots);}createDots();//使用创建Dot类函数requestAnimationFrame(animateDots);//使用canvas独有的60Hz刷新屏幕画布的方法document.querySelector('canvas').addEventListener('mousemove', function (e) {mousePosition.x = e.pageX;mousePosition.y = e.pageY;})document.querySelector('canvas').addEventListener('mouseleave', function (e) {//鼠标离开时，连接自动返回到画布中心mousePosition.x = canvas.width / 2;mousePosition.y = canvas.height / 2;})}

2.然后在需要使用动态背景的html页面引入js文件就可以了

效果如下：

使用js实现动态背景相关推荐

HTML5+CSS3+JS制作动态背景登录界面
目录第一步:编写HTML框架第二步:设置css样式表第三步:编写js代码第一步:编写框架 1.分别新建html,css和js文档后,将css和js分别链接至html中. 2.编写html基本框 ...
动态背景组件（vue-particles）
动态背景组件(vue-particles) 启用 vue-particles 粒子背景插件(main.js) 动态背景组件(AnimatedWallpaper.vue) 使用方式效果图启用 vue ...
vanta.js的使用（前端网站动态背景）
vanta.js可以为网站设置炫酷的动态背景比如在网站登陆的首页官网 Vanta.js - Animated 3D Backgrounds For Your Website npm官网 vanta ...
JS实现线条动态背景
[Top] JS实现线条动态背景线条随机运动,鼠标移动过程中,有吸附性,话不多说,直接上代码吧! !function () {let num = 100;//设置所画线的颜色let colorLin ...
html背景边框特效代码,纯JS实现动态边框特效
HtmlCssJs ^-^正常的边框 ^-^更慢的边框 ^-^更快的边框 ^-^图片边框 ^-^更细的边框附赠的圆形 body { flex-wrap:wrap; flex:1 } .flex { ...
酷炫一款动态背景（HTML +js canvas）
一款酷炫的前端动态页面废话不多说 ,分享一款酷炫的页面动态背景效果见下图. 查看 demo 背景图效果: 实例效果点击效果: 背景css *{margin: 0;padding: 0;}#ca ...
Django开发数据可视化大屏-JS绘制大屏动态背景-（视图模板制作）
查看本文前请先查看 Django开发数据可视化大屏-项目启动配置通过前面的文章,我们已经创建了一个Django简单项目,并且做了相关的配置,今天我们来制作视图模板,通过JS绘制3D动态背景效果. 我 ...
html列表圆点背景,JS实现多彩圆点气泡动态背景
JS实现多彩圆点气泡动态背景一段简短的JS代码,利用html5的canva动画特性,实现多彩圆点气泡动态背景. 网上流传的那种动态背景使用的是easyBackground这种js库,原理是一样的~ ...
php星空背景动态,JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: CSS: /*css reset */ body ...

使用js实现动态背景

js动态背景

使用js实现动态背景相关推荐

最新文章

热门文章