【前端】 canvas画图
一、场景描述
利用js中的canvas画图来画图，爱心、动画。
二、问题拆解
第一个是：canvas画图相关知识。
第二个是：动画相关内容。
三、知识背景
3.1 canvas画图相关内容
canvas画图的基本步骤
- 获取页面上的canvas标签对象
- 获取绘图上下文 canvas.getContext(“2d")
- 绘图
- 绘制已定义的路径 strock()
3.2 requestAnimationFrame(callback)方法 替代setTimeout和setInterval来设置动画
requestAnimationFrame这个方法的作用是 回掉函数的调用频率与显示器的刷新率一样。
用法如下所示
const zero = performance.now(); //获取当前时间戳function animate() {//利用现在时间戳减去程序开始时的时间戳，进行动画制作（求余再除 1 秒周期的动画）const value = ((performance.now() - zero) % 1000) / 1000;//清除当前区域的以画图形ctx.clearRect(0,0,width,height);//重新画图draw(100+10*value);console.log(value);//进行回调animationFrame = requestAnimationFrame(animate);
}
四、场景实现
画爱心
爱心的极坐标公式
x(t) = 16* sin^{3}(t)
y(t) = 13cos(t) - 5cos(2t) - 2cos(3t) - cos(4t)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: black;}</style>
</head>
<body><canvas id="canvas"></canvas>
</body>
<script>//根据公式获取爱心图形路径上的点function getPointsXY(){var points = [];var x=0,y=0;for(var i = 0;i<Math.PI*2;i=i+0.01){x = 16 * Math.pow(Math.sin(i),3)*20;y = -(13 * Math.cos(i) - 5 * Math.cos(2*i) - 2 * Math.cos(3*i) - Math.cos(4*i))*20;points.push({x: canvas.width / 2 + x,y: canvas.height / 2 + y})}return points;}function init() {const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;}//获取页面上的canvas标签const canvas = document.getElementById("canvas");init(); //获取绘图上下文const ctx = canvas.getContext("2d");//设置画笔颜色ctx.strokeStyle = 'pink';ctx.lineWidth = 5;//开始路径ctx.beginPath();//获取路径上的各个节点var points = getPointsXY();//依次连接各个点ctx.moveTo(points[0].x,points[0].y);for(let item of points){ctx.lineTo(item.x,item.y);ctx.moveTo(item.x,item.y);}ctx.lineTo(points[0].x,points[0].y);ctx.moveTo(0,0);// for(let item of points){// ctx.lineTo(item.x,item.y);// ctx.moveTo(item.x,item.y);// }ctx.lineTo(50,50);//闭合路径//ctx.closePath();//描述ctx.stroke();//ctx.fill();
</script>
</html>
图形动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas"></canvas>
</body>
<script>function draw(r){//圆心位置 (x, y), 半径, 起始角度, 结束角度, 方向 (true为顺时针, false为逆时针)ctx.beginPath();ctx.arc(width/2,height/2,r,0,Math.PI*2,false);let grad = ctx.createRadialGradient(width/2,height/2, 50, width/2,height/2, 200)grad.addColorStop(0, "pink"); // 设置渐变颜色grad.addColorStop(0.5, "yellow");grad.addColorStop(1, "lightblue");ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象ctx.fill();//闭合路径ctx.closePath();//描述ctx.stroke();ctx.beginPath();ctx.arc(width/2,height/2,5,0,Math.PI*2,false)//设置填充色ctx.fillStyle = "lightblue";//填充图ctx.fill(); }function animate() {const value = ((performance.now() - zero) % 1000) / 1000;ctx.clearRect(0,0,width,height);draw(100+10*value);console.log(value);animationFrame = requestAnimationFrame(animate);}const canvas = document.getElementById("canvas");//设置canvas画板大小const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;const ctx = canvas.getContext("2d");let animationFrame = null;//开始路径ctx.beginPath();const zero = performance.now();console.log(zero);requestAnimationFrame(animate);//draw(100)//闭合路径ctx.closePath();//描述ctx.stroke();
</script>
</html>
相关文章：
【前端】 canvas画图
一、场景描述 利用js中的canvas画图来画图，爱心、动画。 二、问题拆解 第一个是：canvas画图相关知识。 第二个是：动画相关内容。 三、知识背景 3.1 canvas画图相关内容 canvas画图的基本步骤 获取页面上的canvas标签对象获取绘图上下文…...
超标量处理器设计笔记（10） 寄存器重命名过程的恢复、分发
重命名 寄存器重命名过程的恢复使用 Checkpoint 对 RAT 进行恢复使用 WALK 对 RAT 进行恢复使用 Architecture State 对 RAT 进行恢复总结 分发（Dispatch） 寄存器重命名过程的恢复 当发生异常、分支预测失败时，指令占用 RAT、ROB 和 Issue …...
硬件设计-电源轨噪声对时钟抖动的影响
目录 定义 实际案例 总结 定义 首先了解抖动的定义，在ITU-T G.701中有关抖动的定义如下： 数字信号重要瞬间相对于其理想时间位置的短期非累积变化。 抖动是时钟或数据信号时序的短期时域变化。抖动包括信号周期、频率、相位、占空比或其他一些定时特…...
geeCache 一致性hash
目标：解决当自身结点没有改缓存时，从哪个结点获得这个缓存的问题 一、普通的hash算法 hash(Tom)%结点数量 缺点：缓存雪崩 缓存雪崩是指在某一时刻，大量缓存同时失效或宕机，导致大量请求直接访问数据库，从…...
【我的开源】ESCurlGen 一款 ElasticSearch curl 命令生成器
由于经常编写复杂的 Elasticsearch 查询，并通过代码生成查询条件，我发现每次使用 curl 请求 Elasticsearch 时，手动复制配置信息并构建 curl 命令的过程非常繁琐，尤其是在管理多个环境的情况下更为不便。因此，我利用 A…...
Python库NetworkX介绍
NetworkX 是一个用于创建、操作和研究复杂网络结构的 Python 库。它特别适用于图论和网络分析，提供了丰富的图形数据结构和许多常用的算法。无论是学术研究、数据科学还是实际应用，NetworkX 都是分析图网络和复杂关系的强大工具。 1. NetworkX的基本概述…...
Muduo网络库解析--网络模块(2)
前文 重写Muduo库实现核心模块的Git仓库 注：本文将重点剖析 Muduo 网络库的核心框架，深入探讨作者精妙的代码设计思路，并针对核心代码部分进行重写，将原本依赖 boost 的实现替换为原生的 C11 语法。需要说明的是，本文…...
【读书笔记】《论语别裁》语文的变与不变
1.内容摘要 在《论语别裁》第01章“学而”中，作者探讨了语言和文字的变与不变，通过中西文化的对比，分析了文字作为思想表达工具的独立性和持久性。作者指出，虽然外语（如英语和法语）在每三十年有明显变化&a…...
elasticsearch 使用预处理将JSON类型转换成Object类型
文章目录 使用 Ingest Pipeline 和 json 处理器示例：使用Ingest Pipeline 写入数据使用该Pipeline 在Elasticsearch（ES）中，您可以使用“预处理”（通常是通过处理器、Ingest Pipeline等方式）将JSON类型的数据…...
华为HarmonyOS NEXT 原生应用开发： 数据持久化存储（用户首选项）的使用 token令牌存储鉴权！
Preferences 数据持久化存储 用户首选项（Preferences） 1. 封装 仓库工具类 ● 这里可以选择将 数据字段 key 抽取为一个静态方法，这里选择让用户传参，看起来较容易理解！ /*** 首选项 preferences - 实现数据持久化…...
每天40分玩转Django：Django视图和URL
Django视图和URL 一、课程概述 学习项目具体内容预计用时视图基础函数视图、类视图、视图装饰器90分钟URL配置URL模式、路由系统、命名URL60分钟请求处理请求对象、响应对象、中间件90分钟 二、视图基础 2.1 函数视图 # blog/views.py from django.shortcuts import render…...
Kioptirx level4
具体步骤 通过nmap扫描我们所在的网段探测一下存活的主机，发现目标主机开放了80端口可以去访问一下 在访问的同时通过dirb去爆破一下目录，这边发现有一个john的目录不知道是什么可以去 这边在用dirsearch去扫一下防止有漏掉的页面我们没有访问到&#x…...
JPG 转 PDF：免费好用的在线图片转 PDF 工具
JPG 转 PDF：免费好用的在线图片转 PDF 工具 在日常工作和生活中，我们经常需要将图片转换为 PDF 格式。无论是制作电子文档、准备演示材料，还是整理照片集，将图片转换为 PDF 都是一个常见的需求。今天为大家介绍一款完全免费、无需…...
《Django 5 By Example》阅读笔记：p543-p550
《Django 5 By Example》学习第 19 天，p543-p550 总结，总计 8 页。 一、技术总结 1.fixtures (1)定义 A fixture is a collection of files that contain the serialized contents of the database. (2)作用 1)数据导入 一般来说，我们是…...
精品基于Python实现的微信小程序校园导航系统-微信小程序
[含文档PPT源码等] [包运行成功永久免费答疑辅导] 《django微信小程序校园导航系统》该项目采用技术Python的django框架、mysql数据库 ，项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、核心代码介绍视频等 软件开发环境及开发工具…...
【数字花园】个人知识库网站搭建：①netlify免费搭建数字花园
目录 [[数字花园]]的构建原理包括三个步骤：五个部署方案教程相关教程使用的平台 步骤信息管理 这里记录的自己搭建数字花园（在线个人知识库）的经历，首先尝试的是网上普遍使用的方法，也就是本篇文章介绍的。 后面会继续…...
数据仓库工具箱—读书笔记01(数据仓库、商业智能及维度建模初步)
数据仓库、商业智能及维度建模初步 记录一下读《数据仓库工具箱》时的思考，摘录一些书中关于维度建模比较重要的思想与大家分享🤣🤣🤣 博主在这里先把这本书"变薄"~有时间的小伙伴可以亲自再读一读，感受一下…...
分布式 窗口算法 总结
前言 相关系列 《分布式 & 目录》《分布式 & 窗口算法 & 总结》《分布式 & 窗口算法 & 问题》 参考文献 《【算法】令牌桶算法》 固定窗口算法 简介 固定窗口算法是最简单的流量控制算法。固定窗口算法的核心原理是将系统的生命周期划分为一个个…...
docker容器内部启动jupyter notebook但是宿主机无法访问的解决方法
目录 1.问题2.解决方法 1.问题 在docker容器内启动了jupyter notebook，在宿主机内用如下的url无法访问 http://localhost:8888 http://127.0.0.1:8888 启动方法： jupyter notebook 2.解决方法 启动方法加上选项[ --ip‘*’]或者[–ip‘0.0.0.0’] 即启…...
2.2 数据库设计方法
数据库设计流程： 1.需求分析：准确了解分析用户需求（包括数据与处理）。需求分析是整个设计过程的基础，需求分析决定了构建数据库大厦的速度和质量 2.概念结构设计：概设结构设计是整个数据库设计的关键&…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
解锁数据库简洁之道：FastAPI与SQLModel实战指南
在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的，根据Excel列的需求预估的工时直接打骨折，不要问我为什么，主要…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下 总结 问题原因 在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...
安卓基础（aar）
重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...