用js画一个动态生成的爱心
时间: 2023-03-02 17:43:17 浏览: 104
一篇文章教你用python画动态爱心表白
5星 · 资源好评率100%
好的,以下是用纯 JavaScript 代码画一个动态生成的爱心:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态生成爱心</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
}
</style>
</head>
<body>
<script>
// 获取页面宽度和高度
var width = window.innerWidth;
var height = window.innerHeight;
// 创建画布
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
// 获取画布上下文
var ctx = canvas.getContext("2d");
// 创建爱心对象
function Heart(x, y, size, color) {
this.x = x;
this.y = y;
this.size = size;
this.color = color;
this.angle = 0;
this.draw = function() {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(this.size, -this.size, 2 * this.size, 0, 0, 2 * this.size);
ctx.bezierCurveTo(-2 * this.size, 0, -this.size, -this.size, 0, 0);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
this.update = function() {
this.angle += 0.01;
this.y += 1;
// 如果爱心移动到屏幕底部,则重置其位置
if (this.y > height) {
this.x = Math.random() * width;
this.y = -this.size;
}
}
}
// 创建多个爱心对象
var hearts = [];
for (var i = 0; i < 50; i++) {
var x = Math.random() * width;
var y = Math.random() * height;
var size = Math.random() * 20 + 10;
var color = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
var heart = new Heart(x, y, size, color);
hearts.push(heart);
}
// 绘制爱心
function drawHearts() {
ctx.clearRect(0, 0, width, height);
for (var i = 0; i < hearts.length; i++) {
hearts[i].draw();
}
requestAnimationFrame(drawHearts);
}
// 更新爱心位置
function updateHearts() {
for (var i = 0; i < hearts.length; i++) {
hearts[i].update();
}
setTimeout(updateHearts, 10);
}
// 开始绘制和更新爱心位置
drawHearts();
updateHearts();
</script>
</body>
</html>
```
这段代码会在页面中生成一个动态的爱心效果,具体实现过程为:
1. 创建画布并获取画布上下文。
2. 创建一个 `Heart` 构造函数
阅读全文