当前位置：首页 > news >正文

JavaScript实战 - 用Canvas画一个心形

news 2025/8/13 7:20:43

作者：逍遥Sean
简介：一个主修Java的Web网站\游戏服务器后端开发者
主页：https://blog.csdn.net/Ureliable
觉得博主文章不错的话，可以三连支持一下~ 如有疑问或建议，请私信或评论留言！

前言：

如何使用HTML5 Canvas和JavaScript绘制心形图案
HTML5 Canvas提供了一个强大的绘图API，结合JavaScript可以创建各种精美的图形，包括心形图案。本文将介绍如何使用HTML和JavaScript分别绘制一个简单的心形图案。

JavaScript实战 - 用Canvas画一个心形

1. HTML 文件（index.html）
2. JavaScript 文件（drawHeart.js）
3. 技术详解
- HTML 文件
- JavaScript 文件
4.总结

1. HTML 文件（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绘制心形图案</title>
<style>canvas {border: 1px solid #000;display: block;margin: 20px auto;}
</style>
</head>
<body>
<h1>用 JavaScript 绘制心形图案</h1><canvas id="myCanvas"></canvas><script src="drawHeart.js"></script>
</body>
</html>

2. JavaScript 文件（drawHeart.js）

// 获取Canvas元素
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');// 设置Canvas大小
canvas.width = 300;
canvas.height = 300;// 绘制心形函数
function drawHeart(ctx, x, y, size) {ctx.beginPath();ctx.moveTo(x, y);ctx.bezierCurveTo(x + size / 2, y - size / 2, x + size * 1.5, y - size / 2, x + size * 2, y);ctx.bezierCurveTo(x + size * 2.5, y + size / 2, x + size, y + size * 1.5, x, y + size * 2);ctx.bezierCurveTo(x - size, y + size * 1.5, x - size * 2.5, y + size / 2, x - size * 2, y);ctx.bezierCurveTo(x - size * 1.5, y - size / 2, x - size / 2, y - size / 2, x, y);ctx.fillStyle = 'red'; // 设置心形颜色ctx.fill();ctx.closePath();
}// 绘制心形图案
drawHeart(ctx, 150, 150, 50);

3. 技术详解

HTML 文件

在HTML文件中，我们定义了一个Canvas元素和引入了JavaScript文件。Canvas用于绘制图形，JavaScript文件则包含了实际绘制心形图案的代码。

Canvas 元素:
```
<canvas id="myCanvas"></canvas>
```
这里创建了一个Canvas元素，id为myCanvas，用于在页面上绘制图形。
JavaScript 引入:
```
<script src="drawHeart.js"></script>
```
这行代码将drawHeart.js文件引入到HTML文档中。在这个文件中，我们将编写绘制心形的具体逻辑。

JavaScript 文件

JavaScript文件drawHeart.js负责实际绘制心形图案。

获取 Canvas 上下文:
```
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
```
使用document.getElementById获取Canvas元素，然后使用getContext('2d')获取绘图上下文。

绘制心形函数:

function drawHeart(ctx, x, y, size) {ctx.beginPath();// 使用贝塞尔曲线绘制心形路径// 省略贝塞尔曲线细节，详见上面的代码ctx.fillStyle = 'red'; // 设置心形颜色ctx.fill();ctx.closePath();
}