Python画爱心——谁能拒绝用代码敲出来会跳动的爱心呢~

还不快把这份浪漫拿走！！节日就快到来了，给Ta一个惊喜吧~

代码输入中...

11622人浏览 · 2022-11-08 13:30:27

代码输入中... · 2022-11-08 13:30:27 发布

还不快把这份浪漫拿走！！节日就快到来了，给Ta一个惊喜吧~

今天给大家分享一个浪漫小技巧，利用Python中的 HTML 制作一个立体会动的心动小爱心

成千上百个爱心汇成一个大爱心，从里到外形成一个立体状，给人视觉上的冲击感！浪漫极了

+V：hw13980

话不多说上才艺：

</style>
<body>

<div id="jsi-cherry-container" class="container">
<audio autoplay="autopaly">
<source src="renxi.mp3" type="audio/mp3" />
</audio>
<img class="img" src="./123.png" alt="" />

<canvas id="pinkboard" class="container"> </canvas>
</div>

部分代码

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