html代码写爱心特效
时间: 2023-11-23 19:56:23 浏览: 119
HTML动态爱心特效代码
5星 · 资源好评率100%
以下是一个基于HTML5 Canvas绘制的红色粒子流动的爱心形状动画特效的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Love Particle Effect</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var particles = [];
var particleCount = 100;
var particleRadius = 3;
var particleSpeed = 1;
var particleColor = '#ff0000';
var heartSize = 200;
var heartPosX = w / 2;
var heartPosY = h / 2 - 50;
var heartShape = function(x, y) {
return Math.pow(Math.pow(x / heartSize, 2) + Math.pow(y / heartSize, 2) - 1, 3) - Math.pow(x / heartSize, 2) * Math.pow(y / heartSize, 3);
};
var drawHeart = function() {
ctx.beginPath();
ctx.fillStyle = particleColor;
for (var y = -heartSize; y < heartSize; y += particleRadius) {
for (var x = -heartSize; x < heartSize; x += particleRadius) {
if (heartShape(x, y) < 1) {
var particle = {
x: x + heartPosX,
y: y + heartPosY,
vx: (Math.random() - 0.5) * particleSpeed,
vy: (Math.random() - 0.5) * particleSpeed,
radius: particleRadius
};
particles.push(particle);
}
}
}
ctx.closePath();
ctx.fill();
};
var updateParticles = function() {
for (var i = 0; i < particles.length; i++) {
var particle = particles[i];
particle.x += particle.vx;
particle.y += particle.vy;
if (particle.x < 0 || particle.x > w || particle.y < 0 || particle.y > h) {
particles.splice(i, 1);
i--;
}
}
};
var renderParticles = function() {
ctx.beginPath();
ctx.fillStyle = particleColor;
for (var i = 0; i < particles.length; i++) {
var particle = particles[i];
ctx.moveTo(particle.x, particle.y);
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2, false);
}
ctx.closePath();
ctx.fill();
};
var loop = function() {
ctx.clearRect(0, 0, w, h);
drawHeart();
updateParticles();
renderParticles();
requestAnimationFrame(loop);
};
loop();
</script>
</body>
</html>
```
阅读全文