【HTML实战】把爱心代码放在自己的网站上是一种什么体验？_心形代码网站

最新推荐文章于 2024-07-25 11:52:08 发布

2301_82243558

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量70

点赞数 2

分类专栏：程序员文章标签： html 前端

本文链接：https://blog.csdn.net/2301_82243558/article/details/138333217

版权

程序员专栏收录该内容

293 篇文章 0 订阅

订阅专栏

GitHub进不去的话，源代码这也有一份，有点长：

<!DOCTYPE html>
<html>

<head>
    <title> 爱心代码 </title>
    <meta charset="utf-8">
    <meta name="Author" content="花无缺">
    <meta name="Keywords" content="爱心代码">
    <meta name="Description" content="爱心代码">
    <link rel="shortcut icon" href="../picture/爱心.png" type="image/x-icon">
    <style>
 html,
 body {
 height: 100%;
 padding: 0;
 margin: 0;
 background: #000;
 }

 canvas {
 position: absolute;
 width: 100%;
 height: 100%;
 }
 </style>

</head>

<body>
    <canvas id="pinkboard"></canvas>
    <script>

 var settings = {
 particles: {
 length: 500,
 duration: 2,
 velocity: 100,
 effect: -0.75,
 size: 30,
 },
 };


 (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }());


 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;
 })();


 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;
 })();


 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;


 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;

 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();


![img](https://img-blog.csdnimg.cn/img_convert/90cbfdfdb50b144a860bd0ff50d8ab76.png)
![img](https://img-blog.csdnimg.cn/img_convert/5a58c47de5d39a466a01dfd07ad6fafc.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**