用js 代码写一个爱心
时间: 2023-11-18 10:46:39 浏览: 56
好的,以下是用 JavaScript 代码实现一个简单的爱心:
```javascript
// 创建 canvas 元素
const canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
// 获取 2D 上下文
const context = canvas.getContext('2d');
// 绘制爱心
context.beginPath();
context.moveTo(50, 15);
context.bezierCurveTo(50, 5, 30, 5, 30, 15);
context.bezierCurveTo(30, 30, 50, 50, 50, 50);
context.bezierCurveTo(50, 50, 70, 30, 70, 15);
context.bezierCurveTo(70, 5, 50, 5, 50, 15);
context.fillStyle = 'red';
context.fill();
// 将 canvas 元素插入到页面中
document.body.appendChild(canvas);
```
运行这段代码,就可以在页面上看到一个红色的爱心了。
相关问题
情人节用js写一个爱心代码
情人节快乐!你可以用 JavaScript 写一个简单的爱心代码。以下是一个示例代码,使用 HTML5 canvas 绘制一个爱心图形:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Love Heart</title>
</head>
<body>
<canvas id="loveHeart"></canvas>
<script>
var canvas = document.getElementById("loveHeart");
var ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
ctx.translate(100, 100);
for (var i = 0; i <= 360; i++) {
ctx.rotate(Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(15, -30, 30, -15, 0, -50);
ctx.bezierCurveTo(-30, -15, -15, -30, 0, 0);
ctx.strokeStyle = "red";
ctx.stroke();
}
</script>
</body>
</html>
```
这是一个使用 canvas 绘制的爱心,使用了贝塞尔曲线来制作图形。你可以按照自己的需求调整代码,比如改变颜色、大小等。希望这个代码能帮助你度过一个愉快的情人节!
用js写一个爱心动画代码
以下是一个简单的爱心动画,使用 HTML5 的 Canvas 和 JavaScript 实现:
HTML:
```html
<canvas id="canvas"></canvas>
```
CSS:
```css
canvas {
display: block;
margin: auto;
}
```
JavaScript:
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const heart = {
x: width / 2,
y: height / 2,
size: 100,
speed: 5,
fillStyle: '#ff6b6b'
};
function drawHeart() {
ctx.beginPath();
ctx.moveTo(heart.x, heart.y + heart.size / 4);
ctx.quadraticCurveTo(heart.x - heart.size / 4, heart.y - heart.size / 4, heart.x, heart.y - heart.size / 2);
ctx.quadraticCurveTo(heart.x + heart.size / 4, heart.y - heart.size / 4, heart.x, heart.y + heart.size / 4);
ctx.closePath();
ctx.fillStyle = heart.fillStyle;
ctx.fill();
}
function update() {
heart.y -= heart.speed;
if (heart.y < -heart.size) {
heart.y = height + heart.size;
}
}
function render() {
ctx.clearRect(0, 0, width, height);
drawHeart();
}
function loop() {
requestAnimationFrame(loop);
update();
render();
}
loop();
```
代码解析:
- 创建一个 Canvas 元素,并使用 JavaScript 获取 Canvas 上下文对象。
- 定义一个心形对象,包括位置、大小、速度和填充颜色等属性。
- 编写绘制心形的函数 drawHeart,使用二次贝塞尔曲线绘制一个心形。
- 编写更新心形位置的函数 update,使其以一定速度向上移动,并在移出画布边界时重置位置。
- 编写绘制函数 render,清空画布并调用 drawHeart 函数绘制心形。
- 编写循环函数 loop,使用 requestAnimationFrame 方法循环调用 update 和 render 函数,实现动画效果。
效果预览:
![heart-animation](https://cdn.jsdelivr.net/gh/linyuxuanlin/Wiki@main/assets/images/heart-animation.gif)
完整代码和在线演示:https://codepen.io/linyuxuanlin/pen/MWjWgZJ