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

JavaScript实战 - 用Canvas画一个心形

作者:逍遥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画一个心形

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

vim gcc

vim 使用 vs filename 分屏 ctrl ww 切窗口 shift zz 快速提出vim vim配置 vim启动时自动读取当前用户的家目录的.vimrc文件 vim配置只影响本用户 其他用户观看同一文件不受影响 gcc指令 & c文件编译过程 动态库 静态库 & 链接方式 有相应库才能进行…...

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

Symfony 表单构建器&#xff1a;创建和管理表单的最佳实践 Symfony 是一个流行的 PHP 框架&#xff0c;以其强大的功能和灵活性闻名。表单构建器是 Symfony 中一个非常重要的组件&#xff0c;它提供了简单且高效的方式来创建和管理表单。本文将详细介绍 Symfony 表单构建器的最…...

Intel电脑CPU的选择

酷睿 i5/i7/i9 系列至强 Xeon 系列应用场景家用消费级电脑企业服务器工作站PCIe通道数 16X 最多识别到2张显卡&#xff0c;且每张降速为8X 64X 最多支持8张显卡同时使用 内存信道2通道8通道内存容量最大128GB最大6TB工作时长不建议长期不间断连续使用专为365*24不断电使用而设…...

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

MySQL字段设置的varchar长度小于数据长度自动截取丢弃超出的长度而不是报错&#xff1f; 事情是这样的&#xff0c;我们一个订单表存放了商品的快照信息其中快照信息存储的是json格式商品信息&#xff0c;当查看订单是报错了&#xff0c;发现我们后端服务查询到订单的快照信息…...

Linux|多线程(三)

线程池 线程池是一种多线程处理形式&#xff0c;处理过程中它将被提交的任务分配给预先创建好的多个线程中的一个去执行。 线程池的实现 #pragma once #include <pthread.h> #include <vector> #include <string> #include <unistd.h> #include <…...

智能合约中如何返回mapping

在 Solidity 中&#xff0c;直接返回一个 mapping 的所有数据是不可能的&#xff0c;因为 mapping 本身不支持直接遍历。但是&#xff0c;可以使用一些技巧来实现这一目标&#xff0c;例如通过维护一个额外的数组来跟踪 mapping 中的键&#xff0c;并通过这个数组来返回所有的键…...

nginx的学习(二):负载均衡和动静分离

简介 nginx的负载均衡和动静分离的简单使用 负载均衡配置 外部访问linux的ip地址:80/edu/a.html地址&#xff0c;会轮询访问Tomcat8080和Tomcat8081服务。 Tomcat的准备 准备两个Tomcat&#xff0c;具体准备步骤在nginx的学习一的反向代理例子2中&#xff0c;在Tomcat8080…...

普中51单片机:DS1302时钟芯片讲解与应用(十)

文章目录 引言基本特性什么是RAM&#xff1f;什么是涓流充电&#xff1f; 电路图和引脚说明通信协议以及工作流程寄存器控制寄存器日历/时钟寄存器 DS1302读写时序代码演示——数码管显示时分秒 引言 DS1302 是一款广泛使用的实时时钟 (RTC) 芯片&#xff0c;具有低功耗、内置…...

Preact:轻量级替代React的选择

Preact是一个轻量级的JavaScript库&#xff0c;它提供了与React相似的API&#xff0c;但体积更小&#xff0c;性能更优。Preact的核心理念是尽可能地保持与React的兼容性&#xff0c;同时去除不必要的部分&#xff0c;使其成为一个理想的替代品&#xff0c;尤其是在对性能和包大…...

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

项目概述 随着工业4.0时代的到来&#xff0c;工业物联网&#xff08;IIoT&#xff09;在提高生产效率、降低运营成本和实现智能制造方面得到了广泛应用。本项目旨在开发一个全面的工业物联网监控系统&#xff0c;能够实时监测设备的温度、压力、振动和电流等参数&#xff0c;并…...

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

一、数据倾斜问题的原因 数据分布不均匀&#xff1a;当数据在表的分区或分片中不均匀分布时&#xff0c;会导致某些分区或分片的数据量较大&#xff0c;从而引发数据倾斜问题。连接键存在热点数据&#xff1a;如果连接操作中使用的键值存在热点数据&#xff0c;即某些键值出现…...

缓存设计理论

缓存设计理论是一个涉及多个方面的复杂主题&#xff0c;主要目标是优化数据访问速度&#xff0c;减少数据访问延迟&#xff0c;提高系统性能&#xff0c;并同时保持数据的一致性和系统的稳定性。以下是从几个关键方面对缓存设计理论的概述&#xff1a; 一、缓存的作用与目的 …...

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

第一步&#xff1a;安装 file-settings-plugins-在marketplace搜索“CamelCase”-点击安装 第二步&#xff1a;设置 file-settings-editor-camel_case 第三步&#xff1a;使用 选中想转换的遍历 使用快捷键 Alt Shift U...

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

背景: 点击基座项目页面左侧目录, 进入微前端子项目页面, 会有短暂的样式未加载效果一闪而过, 造成页面闪烁或更严重的其他样式错位问题 定位: 同事查了 qiankun git 项目的 issue: https://github.com/umijs/qiankun/issues/219 , 找到解决方案 解决: 项目 webpack 打包配…...

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

固态电容全称是固态铝质电解电容&#xff0c;它与普通液态铝质电解电容的最大差别在于采用了不同的介电材料。液态铝电容介电材料为电解液&#xff0c;而固态电容的介电材料是固态的导电性高分子材料。 固态电容和液态电容&#xff0c;从外观上区分&#xff0c;就是固态电容顶…...

PLC 远程下载网关

一、 产品概述 SSF-BOX-100 是三石峰科技有限公司推出的工业级 PLC 远程下载网关&#xff0c;主 要用于 PLC 远程调试、程序上下载&#xff0c;为用户提供一种简单可靠的远程维护方案。 1.1 SGBOX 软件 SGBOX 软件是 SSF-BOX-100 网关的配套软件&#xff0c;可以查看设备状态…...

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

文章目录 安装pandas写views写urls安装openpyxl重新调试 安装pandas Pandas是一个基于NumPy的Python数据分析库&#xff0c;可以从各种文件格式如CSV、JSON、SQL、Excel等导入数据&#xff0c;并支持多种数据运算操作&#xff0c;如归并、再成形、选择等。 更换pip源 pip co…...

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

带死区的PID控制算法 在计算机控制系统中&#xff0c;为了避免控制动作过于频繁&#xff0c;消除因频繁动作所引起的振荡&#xff0c;可采用带死区的PID控制。带死区的PID控制通过引入一个死区&#xff0c;使得在误差较小的范围内不进行控制动作&#xff0c;从而减少控制系统的…...

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

今天下载orange-admin项目&#xff0c;不过下载下来运行出现一些问题。 1、涉及到XMLStreamException的几个类都出现下面的错误 The package javax.xml.stream is accessible from more than one module: <unnamed>, java.xml ctrl-shift-t 可以找到这个引入是哪些包里…...

uniapp定位踩坑记:腾讯地图误差1km?高德地图精准配置全攻略

Uniapp定位精度优化实战&#xff1a;从腾讯地图1km误差到高德厘米级精准配置 最近在开发一款外卖配送类应用时&#xff0c;我被定位精度问题折磨得够呛。原本以为接入腾讯地图SDK就能轻松搞定&#xff0c;结果实测发现定位偏差经常达到800米以上——这对于需要精确到楼栋的外卖…...

python-flask-djangol框架的婚恋相亲交友网站

目录技术选型与框架对比核心功能模块设计数据库模型示例&#xff08;Django ORM&#xff09;安全防护措施部署方案开发路线图项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术选型与框架对比 Flask&#xff1a;轻量级框架&a…...

【Hot 100 刷题计划】 LeetCode 138. 随机链表的复制 | C++ 链表深拷贝题解

LeetCode 138. 随机链表的复制 | C 哈希表 DFS 深拷贝题解 &#x1f4cc; 题目描述 题目级别&#xff1a;中等 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 请你构造这个链表的深拷…...

Llama-3.2V-11B-cot企业级应用:双卡4090支撑的生产环境视觉推理服务搭建

Llama-3.2V-11B-cot企业级应用&#xff1a;双卡4090支撑的生产环境视觉推理服务搭建 1. 项目概述 Llama-3.2V-11B-cot是基于Meta最新多模态大模型开发的高性能视觉推理工具&#xff0c;专为企业级生产环境设计。该工具针对双卡NVIDIA RTX 4090环境进行了深度优化&#xff0c;…...

美国是如何对GEO进行监管的?

一、GEO投毒并不是中国独有 2026年央视“315”晚会首次把“GEO投毒”这一灰色产业链推到台前。所谓“投毒”&#xff0c;说白了&#xff0c;就是有人通过批量制造虚假信息、污染训练或检索数据&#xff0c;去干扰AI的推荐和回答结果&#xff0c;最后把一些虚假、低质甚至根本不…...

FastAdmin+PHPStudy保姆级安装教程:从下载到配置数据库的完整流程

FastAdminPHPStudy极速开发环境搭建实战指南 作为一名长期使用FastAdmin框架的开发者&#xff0c;我深知一个顺畅的本地开发环境对项目效率的影响。本文将带你从零开始&#xff0c;用最简洁的方式完成FastAdmin与PHPStudy的完美搭配&#xff0c;避开那些新手常踩的"坑&quo…...

BiliTools:全能B站资源管理工具,让离线学习与内容备份无忧

BiliTools&#xff1a;全能B站资源管理工具&#xff0c;让离线学习与内容备份无忧 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持视频、音乐、番剧、课程下载……持续更新 项目地址: https://gitcode.com/GitHub_Tren…...

RWKV7-1.5B-g1a轻量对话模型应用:微信公众号自动回复+知识库问答搭建

RWKV7-1.5B-g1a轻量对话模型应用&#xff1a;微信公众号自动回复知识库问答搭建 1. 模型简介与特点 rwkv7-1.5B-g1a 是基于 RWKV-7 架构的多语言文本生成模型&#xff0c;特别适合中文轻量对话场景。相比传统大模型&#xff0c;它具有以下优势&#xff1a; 资源占用低&#…...

2026年江苏省职业院校技能大赛(学生组)信息安全管理与评估(技能操作阶段)竞赛样题

2026年江苏省职业院校技能大赛&#xff08;学生组&#xff09;信息安全管理与评估&#xff08;技能操作阶段&#xff09;竞赛样题 文章目录2026年江苏省职业院校技能大赛&#xff08;学生组&#xff09;信息安全管理与评估&#xff08;技能操作阶段&#xff09;竞赛样题任务1&a…...

OpCore-Simplify:智能化解构OpenCore EFI配置难题,让黑苹果安装不再复杂

OpCore-Simplify&#xff1a;智能化解构OpenCore EFI配置难题&#xff0c;让黑苹果安装不再复杂 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为…...