canvas 的粒子效果

最新推荐文章于 2024-08-19 16:56:14 发布

zt_vicky

最新推荐文章于 2024-08-19 16:56:14 发布

阅读量666

点赞数

本文链接：https://blog.csdn.net/zt_vicky/article/details/60320082

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
</style>

<body>
<canvas id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.style.backgroundColor = "#666666"

var x = window.innerWidth / 2;
var y = window.innerHeight / 3;

function makeCicle(x, y) {
this.x = x;
this.y = y;

this.yVal = -15
this.xVal = Math.random() * 20 - 10
this.g = 1;

this.color = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";

this.update = function() {
this.x = this.x + this.xVal;
this.y = this.y + this.yVal;
this.yVal = this.yVal + this.g;
ctx.beginPath();
ctx.arc(this.x, this.y, 5, 0, 2 * Math.PI);
//ctx.fillStyle = "#0000ff"; //#000-#FFF
ctx.fillStyle = this.color;
ctx.fill();
ctx.stroke();
}
}
//var c1 = new makeCicle(x, y)
var cicles = []
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height)

var c = new makeCicle(x, y);
cicles.push(c)
for(var i = 0; i < cicles.length; i++) {
cicles[i].update()
}
//每一帧换一个画布
//c1.update()
}, 100)

canvas.onmousemove = function(e) {
//console.log(e)
x = e.clientX
y = e.clientY
}
</script>

</html>