装逼必备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的属性吧
值 | 描述 |
---|---|
length | 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
那么简单的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代码后,我们就可以看到动态的背景效果了。