这篇博客展示了如何使用HTML、CSS和JavaScript创建一个彩虹空间独角兽动画。通过定义Vector、Particle、Unicorn等类，结合Canvas API进行渲染，实现了粒子效果和独角兽的动态展示。同时，介绍了相关的数据结构和动画更新逻辑。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Rainbow Space Unicorn</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<img src="img/unicorn.png" alt="unicorn" id="unicorn" hidden>
<script src="js/index.js"></script>
</body>
</html>
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
window.addEventListener('DOMContentLoaded', init);
//#region classes
var Vector = /** @class */ (function () {
function Vector() {
this.x = 0;
this.y = 0;
this.vx = 0;
this.vy = 0;
this.angle = 0;
this.va = 0.05;
}
return Vector;
}());
var Particle = /** @class */ (function (_super) {
__extends(Particle, _super);
function Particle() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.id = Math.random().toString();
_this.color = randomColor();
_this.radius = 8;
_this.opacity = 1;
return _this;
}
return Particle;
}(Vector));
var Unicorn = /** @class */ (function (_super) {
__extends(Unicorn, _super);
function Unicorn(image) {
var _this = _super.call(this) || this;
_this.image = image;
return _this;
}
return Unicorn;
}(Vector));
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
