【前端】 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.概念结构设计：概设结构设计是整个数据库设计的关键&…...
别再怕时序违例了！聊聊数字IC设计里那个‘偷时间’的Timing Borrow技巧
数字IC设计中的时序魔术：Timing Borrow实战解析 时钟信号如同城市交通的指挥灯，而数据信号则是川流不息的车辆。当某个路口（关键路径）出现拥堵时，传统做法是拓宽道路（优化逻辑）或降低车速&#…...
Java读取Word图片坐标位置的方法
Word文档中图片坐标怎么获取于实际开发期间，我们时常得去处理Word文档里的图片，像是把图片提取出来，对排版予以调整，亦或是进行自动化校验。然而，好多人在获取图片的坐标位置之际卡住了，这事是由于Word的图…...
Salesforce 扩展“无头”概念至企业数据管理，新架构与系统二季度末或年底推出
分析师提醒分析师表示，此次更新或许能让开发者省去构建 AI 驱动工作流时通常所需的大量集成和定制开发工作，但首席信息官（CIO）们应警惕成本和准确性方面的问题。“无头”概念扩展Salesforce 似乎正致力于“颠覆”企业软件领域。在…...
机器学习驱动的中微子-核散射截面建模：从数据学习到振荡分析
1. 项目概述与核心价值 中微子物理正步入一个前所未有的“精密测量”时代。像DUNE（深地下中微子实验）这样的下一代长基线实验，目标是将中微子混合参数的测量精度推至百分之一量级。然而，一个长期存在的“拦路虎”限制了这一目标的…...
好用的长沙装修设计值得选的服务商
在装修设计领域，选择一家靠谱的服务商至关重要。长沙互知空间设计工作室，也就是长沙互知建筑设计有限公司，便是众多客户值得信赖的选择。下面将从几个方面详细分析它的优势，并与其他知名品牌进行对比，为大家提供一些实…...
Taotoken 多模型聚合能力如何赋能智能客服场景的快速迭代
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Taotoken 多模型聚合能力如何赋能智能客服场景的快速迭代 智能客服系统的核心在于其对话生成的质量与稳定性。产品经理与开发者在优…...
COCO数据集到底怎么用？从PyTorch和TensorFlow加载到可视化标注的完整代码示例
COCO数据集实战指南：从数据加载到可视化标注的全流程解析 计算机视觉领域的研究者和开发者们，当你开始构建目标检测或图像分割模型时，COCO数据集无疑是你最重要的训练资源之一。这个由微软发起的大规模数据集已经成为行业标准，但许…...
拆解正点原子STM32F103综合例程：如何用一块MCU实现MP3播放器、NES游戏机和简易手机？
STM32F103多功能系统设计：从MP3播放器到NES游戏机的工程实践 在嵌入式系统开发领域，如何利用有限资源实现复杂功能一直是工程师面临的挑战。正点原子STM32F103战舰开发板的综合例程展示了这款经典MCU的强大潜力——通过精心设计的软件架构，将…...
【51单片机通过矩阵键盘控制led灯显示二进制码】2023-12-5
缘由51单片机通过矩阵键盘控制led灯显示二进制码_编程语言-CSDN问答 #include "reg52.h" unsigned char code SmZiFu[]{63,6,91,79,102,109,125,7,127,111,128,0};//共阴0-9. unsigned char code ShaoMiaoZhi[]{238,237,235,231,222,221,219,215,190,189,187,183,12…...
【DeepSeek事实准确性测试权威报告】：2024年7大维度实测数据揭穿幻觉率真相
更多请点击： https://intelliparadigm.com 第一章：DeepSeek事实准确性测试权威报告总览 本报告基于2024年Q3由AI Safety Benchmark Consortium（ASBC）主导的跨模型事实一致性评估项目，对DeepSeek-V2、DeepSeek-Coder-3…...