运行效果是一个正方形在跳动,你可以制作成爱心形状吗,你能用前端代码做一个吗
时间: 2023-06-25 11:07:20 浏览: 50
当然可以,可以使用 HTML5 画布(Canvas) 来实现这个效果。以下是一个简单的示例代码,可以将正方形改为爱心形状:
```html
<!DOCTYPE html>
<html>
<head>
<title>爱心跳动</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 爱心形状的路径
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fillStyle = "#FF69B4"; // 爱心形状的颜色
ctx.fill();
// 定义动画帧的起始点和终止点
var x = 100;
var y = 100;
var dx = 2;
var dy = 2;
var radius = 20;
function draw() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 画爱心
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.fillStyle = "#FF69B4"; // 爱心的颜色
ctx.fill();
// 更新位置
x += dx;
y += dy;
// 检测是否碰到画布边缘
if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}
}
setInterval(draw, 10); // 每 10 毫秒执行一次 draw 函数
</script>
</body>
</html>
```
你可以将上面的代码复制到一个 HTML 文件中,并在浏览器中打开,就可以看到一个跳动的爱心形状了。
相关推荐
![html](https://img-home.csdnimg.cn/images/20210720083451.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)