表白必备小心心 biubiubiu~

效果图

<!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"></div></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.htmlthis.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 positionthis.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>

表白必备小心心 biubiubiu~相关推荐

用代码写一个表白biu小心心
废话不多说,直接上效果图效果如图,需要代码的宝宝,关注,私信我
Python表白代码合集：5种表白代码、比小心心、无限弹窗、520表白墙、抖音热门表白小软件、无套路表白
一.介绍一下写了5个Python表白代码,代码很简单,通俗易懂,都有注释.有什么问题联系本人QQ:483062431.文章最后教你们怎么打包成exe,如果你懒得搞懂代码怎么回事 ...
html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备
❉ html+css+javascript雪花爱心520表白网站 (含音乐)程序员表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 程序员浪漫起来真 ...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
使用vue完成点击鼠标产生小心心特效
先上源码背景颜色很不好看,如需修改请#lovesBgc{}更改这个里边的就好 <template><div><div id="lovesBgc" & ...
❤唯美满天星❤ html+css+js炫酷3D相册(含音乐/可自定义文字)程序员表白必备
元旦节快到了,在跨年夜前夕.是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ❤元旦节表白3D相册,在元 ...
html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备...
❉ html+css+javascript雪花爱心520表白网站 (含音乐)程序员表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 程序员浪漫起来真 ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备...
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...

表白必备小心心 biubiubiu~

表白必备小心心 biubiubiu~相关推荐

最新文章

热门文章

表白必备 小心心 biubiubiu~

表白必备 小心心 biubiubiu~相关推荐

最新文章

热门文章

表白必备小心心 biubiubiu~

表白必备小心心 biubiubiu~相关推荐