帮我用代码完成一个动态爱心的效果
时间: 2024-05-24 19:05:20 浏览: 13
好的,请稍等,以下是实现动态爱心效果的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态爱心效果</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #f6c;
}
canvas {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
#text {
margin-top: 100px;
text-align: center;
font-size: 24px;
color: #fff;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="text">动态爱心效果</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;
canvas.width = width;
canvas.height = height;
var pi = Math.PI;
var color = ["#f00", "#0f0", "#00f", "#ff0", "#f0f", "#0ff"];
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function Heart(x, y) {
this.x = x;
this.y = y;
this.r = Math.floor(Math.random() * 20) + 10;
this.color = color[random(0, color.length - 1)];
this.a = random(45, 135);
this.draw = function() {
context.save();
context.translate(this.x, this.y);
context.rotate(this.a * pi / 180);
context.fillStyle = this.color;
context.beginPath();
context.moveTo(0, -this.r);
context.bezierCurveTo(
this.r, -this.r,
this.r, this.r,
0, this.r
);
context.bezierCurveTo(
-this.r, this.r,
-this.r, -this.r,
0, -this.r
);
context.closePath();
context.fill();
context.restore();
}
this.update = function() {
if (this.y + this.r * Math.sin(this.a * pi / 180) > height) {
this.x = random(0, width);
this.y = -this.r;
this.a = random(45, 135);
this.color = color[random(0, color.length - 1)];
} else {
this.x += this.r * Math.sin(this.a * pi / 180);
this.y += this.r * Math.cos(this.a * pi / 180);
this.a += random(-5, 5);
}
}
}
var hearts = [];
for (var i = 0; i < 50; i++) {
hearts.push(new Heart(random(0, width), random(0, height)));
}
function render() {
context.clearRect(0, 0, width, height);
hearts.forEach(function(heart) {
heart.draw();
heart.update();
});
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
```
把以上代码保存为一个 HTML 文件,用浏览器打开即可看到动态爱心效果。希望你喜欢这个效果,如果你还有其它问题,可以继续问我哦。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)