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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...