js制作网页动态背景

2024-07-11 13:29| 来源: 网络整理| 查看: 265

装逼必备canvas

canvas简单来说就是一块画布，通过JavaScript来进行绘制，可以用来制作各种特效

那么如何利用canvas来制作一个动态的网页背景呢，就像这样子：请添加图片描述

首先，我们就需要在我们的html页面中创建一个canvas

对，你没有看错，创建一个canvas就这么简单，甚至可以更简单，你只需要除去外面的div，只写一个canvas就行了…

当然了，我这里的div添加了是用来设置背景的

然后就是简单的css设置了，只需要设置一下div的背景图片就行了

#background { background: url("background.jpg"); background-size: cover; opacity: 0.8; }

简单介绍一下background-size的属性吧

值描述length设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

那么简单的html+css之后，就到了我们的核心，JavaScript代码了，至于每句代码的作用，我都写到注释中了，大家自己看吧，我就不再重复的介绍了一遍了

// 设置div背景的宽高 background = document.getElementById("background") background.style.width = innerWidth + 'px' background.style.height = innerHeight + 'px' // 获取canvas对象 var canvas = document.getElementById("canvas") // 获取画笔 var ctx = canvas.getContext("2d") // 设置canvas宽高 canvas.height = innerHeight canvas.width = innerWidth // 定义一个粒子数组 var particlesArray = [] // 定义页面内粒子的数量 var count = parseInt(canvas.width / 80 * canvas.height / 80) // 定义粒子类 class Particle { constructor(x, y) { this.x = x this.y = y // x，y轴的移动速度 -0.5 -- 0.5 this.directionX = Math.random() - 0.5 this.directionY = Math.random() - 0.5 } // 更新点的坐标 update() { this.x += this.directionX this.y += this.directionY } // 绘制粒子 draw() { ctx.beginPath() ctx.arc(this.x, this.y, 2, 0, Math.PI * 2) ctx.closePath() ctx.fillStyle = "white" ctx.fill() } } // 创建粒子 function createParticle() { // 生成一个点的随机坐标 var x = Math.random() * innerWidth var y = Math.random() * innerHeight particlesArray.push(new Particle(x, y)) } // 处理粒子 // 先更新坐标，再绘制出来 function handleParticle() { for(var i = 0; i particlesArray.splice(i, 1) } // 绘制两个点之间的连线 for(var j = i + 1; j ctx.beginPath() ctx.strokeStyle = "rgba(255, 255, 255, " + (1 - dist / 100) ctx.moveTo(particlesArray[i].x, particlesArray[i].y) ctx.lineTo(particlesArray[j].x, particlesArray[j].y) ctx.closePath() ctx.lineWidth = 1 ctx.stroke() } } } } function draw() { // 首先清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height) // 如果粒子数量小于规定数量，就生成新的粒子 if(particlesArray.length

【本文地址】

公司简介

联系我们