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

JavaScript实战 - 用Canvas画一个心形

news 2026/3/27 21:37:31

作者：逍遥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();
}

这个函数使用Canvas的API绘制一个心形，填充颜色为红色。

调用绘制函数:
```
drawHeart(ctx, 150, 150, 50);
```
最后，在JavaScript文件中调用drawHeart函数来绘制心形图案。可以调整参数以改变心形的位置和大小。

4.总结

通过这篇教程，你学会了如何使用HTML5 Canvas和JavaScript绘制一个简单的心形图案。Canvas的强大在于它允许开发者通过编程的方式创建复杂的图形，而不仅限于简单的形状。你可以进一步扩展这个示例，加入动画效果或者与用户交互的功能，以展示Canvas的更多可能性。

JavaScript实战 - 用Canvas画一个心形

JavaScript实战 - 用Canvas画一个心形

1. HTML 文件（index.html）

2. JavaScript 文件（drawHeart.js）

3. 技术详解

HTML 文件

JavaScript 文件

4.总结

相关文章：

JavaScript实战 - 用Canvas画一个心形

vim gcc

Symfony 表单构建器：创建和管理表单的最佳实践

Intel电脑CPU的选择

MySQL字段设置的varchar长度小于数据长度自动截取丢弃超出的长度而不是报错？

Linux|多线程（三）

智能合约中如何返回mapping

nginx的学习（二）：负载均衡和动静分离

普中51单片机：DS1302时钟芯片讲解与应用（十）

Preact：轻量级替代React的选择

全栈嵌入式C++、STM32、Modbus、FreeRTOS和MQTT协议：工业物联网（IIoT）可视化系统设计思路（附部分代码解析）

Greenplum数据库中的数据倾斜问题及处理方法

缓存设计理论

IDEA-安装插件驼峰下划线转换

乾坤: 微前端项目切换时样式闪动(从无样式变为正常样式需要等 css chunk 文件加载完成, 加载延时受网速影响)

《电子元器件之固态电容》

PLC 远程下载网关

【Django】读取excel文件并在前端以网页形式显示-安装使用Pandas

自动控制：带死区的PID控制算法

橙单后端项目下载编译遇到的问题与解决

突破传统：用Arduino SI4735库打造全频段数字收音机方案

MacOS开发环境配置：OpenClaw+GLM-4.7-Flash联调指南

ai辅助开发：告诉快马你的想法，自动生成jdk17最佳实践代码

Zotero-GPT插件：如何正确配置API密钥以激活AI文献分析功能

AIGlasses_for_navigation免配置环境：预置ffmpeg+opencv+torchvision全栈

LangGPT结构化提示词框架：重新定义AI交互的核心方法

MySQL高手第三章

提升开发效率与视觉舒适度：LxgwWenKai字体全场景配置指南

3步颠覆性解决方案：零成本条码生成技术让企业彻底告别付费依赖

Linux 内核模块编程入门