装逼必备

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

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

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

<div id="background">	<canvas id="canvas"></canvas></div>
1
2
3

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

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

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

#background {    background: url("background.jpg");    background-size: cover;    opacity: 0.8;}
1
2
3
4
5

简单介绍一下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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

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