装逼必备 canvas

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

那么如何利用 canvas 来制作一个动态的网页背景呢，就像这样子：

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

<div id="background">
<canvas id="canvas"></canvas>
</div>

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

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

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

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

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

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

<script>
	//  设置 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.length; i++) {        var particle = particlesArray[i]
	        particle.update()
	        particle.draw()
	        //  超出范围就将这个粒子删除
	        if(particle.x < 0 || particle.x > canvas.width || particle.y < 0 || particle.y > canvas.height) {            particlesArray.splice(i, 1)
	        }

	        //  绘制两个点之间的连线
	        for(var j = i + 1; j < particlesArray.length; j++) {            dx = particlesArray[j].x - particlesArray[i].x
	            dy = particlesArray[j].y - particlesArray[i].y
	            dist = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2))
	            if(dist < 100) {                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 < count) {        createParticle()
	    }

	    //  处理粒子
	    handleParticle()}

	//  设置定时器
	setInterval(draw, 10)

</script>

在页面中加入这部分 js 代码后，我们就可以看到动态的背景效果了。

打赏 支付宝打赏 微信打赏