爱心代码HTML

以你之姓@ 2024-03-27 11:24 80阅读 0赞

代码展示：

<!DOCTYPE html>

<html>

<head>

</head>

<style>

\* \{

padding: 0;

margin: 0;

html,

body \{

height: 100%;

padding: 0;

margin: 0;

background: rgb(2, 2, 2);

canvas \{

position: absolute;

width: 100%;

height: 100%;

.aa \{

position: fixed;

left: 50%;

bottom: 10px;

color: rgb(9, 194, 113)

</style>

<body>

/\*

\* Settings

\*/

var settings = \{

particles: \{

length: 1000, // 最大颗粒量

duration: 3, // 粒子持续时间（秒）

velocity: 100, // 粒子速度（像素/秒）

effect: -0.75, // 玩这个效果很好

size: 20, // 颗粒大小（像素）

\},

\};

/\*

\* Point class

\*/

var Point = (function () \{

function Point(x, y) \{

this.x = (typeof x !== 'undefined') ? x : 0;

this.y = (typeof y !== 'undefined') ? y : 0;

Point.prototype.clone = function () \{

return new Point(this.x, this.y);

\};

Point.prototype.length = function (length) \{

if (typeof length == 'undefined')

return Math.sqrt(this.x \* this.x + this.y \* this.y);

this.normalize();

this.x \*= length;

this.y \*= length;

return this;

\};

Point.prototype.normalize = function () \{

var length = this.length();

this.x /= length;

this.y /= length;

return this;

\};

return Point;

\})();

/\*

\* Particle class

\*/

var Particle = (function () \{

function Particle() \{

this.position = new Point();

this.velocity = new Point();

this.acceleration = new Point();

this.age = 0;

Particle.prototype.initialize = function (x, y, dx, dy) \{

this.position.x = x;

this.position.y = y;

this.velocity.x = dx;

this.velocity.y = dy;

this.acceleration.x = dx \* settings.particles.effect;

this.acceleration.y = dy \* settings.particles.effect;

this.age = 0;

\};

Particle.prototype.update = function (deltaTime) \{

this.position.x += this.velocity.x \* deltaTime;

this.position.y += this.velocity.y \* deltaTime;

this.velocity.x += this.acceleration.x \* deltaTime;

this.velocity.y += this.acceleration.y \* deltaTime;

this.age += deltaTime;

\};

Particle.prototype.draw = function (context, image) \{

function ease(t) \{

return (--t) \* t \* t + 1;

var size = image.width \* ease(this.age / settings.particles.duration);

context.globalAlpha = 1 - this.age / settings.particles.duration;

context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);

\};

return Particle;

\})();

/\*

\* ParticlePool class

\*/

var ParticlePool = (function () \{

var particles,

firstActive = 0,

firstFree = 0,

duration = settings.particles.duration;

function ParticlePool(length) \{

// 创建和填充粒子池

particles = new Array(length);

for (var i = 0; i < particles.length; i++)

particles\[i\] = new Particle();

ParticlePool.prototype.add = function (x, y, dx, dy) \{

particles\[firstFree\].initialize(x, y, dx, dy);

//处理循环队列

firstFree++;

if (firstFree == particles.length) firstFree = 0;

if (firstActive == firstFree) firstActive++;

if (firstActive == particles.length) firstActive = 0;

\};

ParticlePool.prototype.update = function (deltaTime) \{

var i;

// 处理循环队列

if (firstActive < firstFree) \{

for (i = firstActive; i < firstFree; i++)

particles\[i\].update(deltaTime);

if (firstFree < firstActive) \{

for (i = firstActive; i < particles.length; i++)

particles\[i\].update(deltaTime);

for (i = 0; i < firstFree; i++)

particles\[i\].update(deltaTime);

//移除非活性粒子

while (particles\[firstActive\].age >= duration && firstActive != firstFree) \{

firstActive++;

if (firstActive == particles.length) firstActive = 0;

\};

ParticlePool.prototype.draw = function (context, image) \{

//绘制活性粒子

if (firstActive < firstFree) \{

for (i = firstActive; i < firstFree; i++)

particles\[i\].draw(context, image);

if (firstFree < firstActive) \{

for (i = firstActive; i < particles.length; i++)

particles\[i\].draw(context, image);

for (i = 0; i < firstFree; i++)

particles\[i\].draw(context, image);

\};

return ParticlePool;

\})();

/\*

\* 把所有这些放在一起

\*/

(function (canvas) \{

var context = canvas.getContext('2d'),

particles = new ParticlePool(settings.particles.length),

particleRate = settings.particles.length / settings.particles.duration, //粒子/秒

time;

// get point on heart with -PI <= t <= PI

function pointOnHeart(t) \{

return new Point(

160 \* Math.pow(Math.sin(t), 3),

130 \* Math.cos(t) - 50 \* Math.cos(2 \* t) - 20 \* Math.cos(3 \* t) - 10 \* Math.cos(4 \* t) + 25

);

//使用虚拟画布创建粒子图像

var image = (function () \{

var canvas = document.createElement('canvas'),

context = canvas.getContext('2d');

canvas.width = settings.particles.size;

canvas.height = settings.particles.size;

//helper函数创建路径

function to(t) \{

var point = pointOnHeart(t);

point.x = settings.particles.size / 2 + point.x \* settings.particles.size / 350;

point.y = settings.particles.size / 2 - point.y \* settings.particles.size / 350;

return point;

//创建路径

context.beginPath();

var t = -Math.PI;

var point = to(t);

context.moveTo(point.x, point.y);

while (t < Math.PI) \{

t += 0.01; // baby steps!

point = to(t);

context.lineTo(point.x, point.y);

context.closePath();

//创建填充

context.fillStyle = '\#ff9999';

context.fill();

//创建图像

var image = new Image();

image.src = canvas.toDataURL();

return image;

\})();

//渲染那个东西！

function render() \{

//下一动画帧

requestAnimationFrame(render);

//更新时间

var newTime = new Date().getTime() / 1000,

deltaTime = newTime - (time || newTime);

time = newTime;

//透明帆布

context.clearRect(0, 0, canvas.width, canvas.height);

//创建新粒子

var amount = particleRate \* deltaTime;

for (var i = 0; i < amount; i++) \{

var pos = pointOnHeart(Math.PI - 2 \* Math.PI \* Math.random());

var dir = pos.clone().length(settings.particles.velocity);

particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);

//更新和绘制粒子

particles.update(deltaTime);

particles.draw(context, image);

//处理画布的大小

function onResize() \{

canvas.width = canvas.clientWidth;

canvas.height = canvas.clientHeight;

window.onresize = onResize;

//延迟渲染引导

setTimeout(function () \{

onResize();

render();

\}, 10);

\})(document.getElementById('pinkboard'));

</script>

</body>

</html>

演示图片

![e1ddf64764df780f893bb469b8b53be8.png][]

[e1ddf64764df780f893bb469b8b53be8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/41ab8482839543318cda1b0b052cb361.png

爱心代码HTML

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 python 爱心代码

相关【前端】爱心代码

相关桃色爱心——html

相关爱心代码HTML

相关酷炫，爱心，樱花，音乐，情侣的html代码

相关写一个爱心代码

相关爱心发射代码

相关 python画爱心代码

相关 c语言爱心代码(c语言画爱心的代码)

相关用html代码写一个表白语言,HTML写代码表白 – 爱心