当前位置: 首页 > 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 可以找到这个引入是哪些包里…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...