<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas">
您的浏览器不支持canvas，请更换谷歌浏览器
</canvas>
<script>
if (canvas.getContext) {
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
canvas.style.backgroundColor = 'white'
document.title = "全屏气泡"
const ctx = canvas.getContext('2d')
// 声明变量
let radius = 20,
r,
g,
b,
a,
x,
y,
arr = [],
temp = []
for (let i = 0; i < 5; i++) {
arc()
}
// 监听点击事件
canvas.addEventListener('click', event => {
console.log("点击了canvas：", event);
x = event.offsetX
y = event.offsetY
radius = 5
arc(x, y, radius)
})
// 定时刷新canvas
setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height)
arr.forEach((item, index) => {
if (item.a <= 0) {
temp.push(index)
} else {
item.radius += 0.5
item.a -= 0.005
}
draw(item.radius, item.r, item.g, item.b, item.a, item.x, item.y)
})
arr = arr.filter(item => {
return item.a > 0
})
}, 1000 / 60);
// 定时添加新的气泡
setInterval(() => {
arc()
}, 500);
// 画气泡
function draw(radius, r, g, b, a, x, y) {
ctx.beginPath()
ctx.arc(x, y, radius, 0, 2 * Math.PI)
ctx.fillStyle = `rgba(${r},${g},${b},${a})`
ctx.fill()
}
// 气泡数据
function arc(x, y, radius) {
r = arcRandomColor()
g = arcRandomColor()
b = arcRandomColor()
radius = radius || Math.ceil(Math.random() * 10)
x = x || Math.ceil(Math.random() * canvas.width)
y = y || Math.ceil(Math.random() * canvas.height)
a = 1
const temp = {
r,
g,
b,
a,
x,
y,
radius
}
arr.push(temp)
}
// 随机数据
function arcRandomColor() {
return Math.ceil(Math.random() * 254)
}
}
</script>
</body>
</html>
