怦然心动
今天是七夕，一个牛郎和织女鹊桥相会的日子。 还有他们的孩子也跟他们在一起。
感谢你们一直陪伴至今，我不善于表达，我对你们的感激都在这张画布里。
代码不算多，特效也很一般，往后的日子全力以赴发表优秀文章，愿你们web学习一帆风顺，所向披靡。
| 把东坡居士的祝愿送给你们：； |
|---|
| 愿你们“但愿人长久，千里共婵娟”； |
| 愿你们“春宵一刻值千金，花有清香月有阴”； |
| 愿你们“鸳鸯被里成叠夜，一树梨花压海棠”； |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>砰砰砰</title>
<style> body { background: #000800; } canvas { margin: 0 auto; display: block; } </style>
</head>
<body>
<canvas></canvas>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</body>
<script> let canvas = document.querySelector('canvas'), speedSelect = document.querySelector('#speed'), width = 300, height = 300, ctx = canvas.getContext('2d'), pSystemSize = 1000, deform = {a:100, s:0.4, min:-200, max:200, dir:1}; // a=4 is natural if not animated; const mcos = Math.cos, msin = Math.sin, mpow = Math.pow, PI180=Math.PI / 180, tau = Math.PI * 2; canvas.width = width; canvas.height = height; ctx.lineWidth = 1; const ParticleSystem = function(num){ this.scalar = 8; this.numParticles = num; this.allParticles = []; this.x = width * .5; this.y = height * .5; this.generate(); } ParticleSystem.prototype.generate = function(){ for(let i=0; i<this.numParticles; i++){ let vo = {}; vo.degrees = (360 / this.numParticles) * i * PI180; vo.parent = this; vo.x = width / 2; vo.y = height / 2; vo.vx = 0; vo.vy = 0; this.allParticles.push(new Particle(vo)); } } ParticleSystem.prototype.update = function(){ for(let i=0; i<this.allParticles.length; i++){ this.allParticles[i].update(); } } const Particle = function(vo){ this.degrees = vo.degrees; this.parent = vo.parent; this.x = vo.x; this.y = vo.y; this.vx = 0; this.vy = 0; this.colour = 'hsl(' + (Math.round((this.degrees * (180/Math.PI)))) + ',100%,50%)'; } Particle.prototype.update = function(){ // http://mathworld.wolfram.com/HeartCurve.html this.vx = 16 * mpow(msin(this.degrees), 3) * deform.dir; this.vy = ((13 * mcos(this.degrees)) - (6 * mcos(2 * this.degrees)) - // 5 (2 * mcos(3 * this.degrees)) - (mcos(deform.a * this.degrees))) * -1; // update position this.x = this.vx * this.parent.scalar + this.parent.x; this.y = this.vy * this.parent.scalar + this.parent.y; } function update(){ if(deform.dir === 1){ if(deform.a > deform.min){ deform.a -= deform.s; } else{ flipDirection(); } } else{ if(deform.a < deform.max){ deform.a += deform.s; } else{ flipDirection(); } } system.update(); } function flipDirection(){ deform.dir *= -1; } function draw(){ ctx.clearRect(0, 0, width, height); ctx.save(); for(let i=0; i<system.numParticles; i++){ let p = system.allParticles[i]; ctx.fillStyle = p.colour; ctx.beginPath(); ctx.arc(p.x, p.y, 1, 0, tau, false); ctx.fill(); } ctx.restore(); } function animate(){ update(); draw(); requestAnimationFrame(animate); } let system = new ParticleSystem(pSystemSize); animate(); </script>
</html>
