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

【前端】 canvas画图

news 2026/2/10 23:13:42

一、场景描述

利用js中的canvas画图来画图，爱心、动画。

二、问题拆解

第一个是：canvas画图相关知识。
第二个是：动画相关内容。

三、知识背景

3.1 canvas画图相关内容

canvas画图的基本步骤

  1. 获取页面上的canvas标签对象
  2. 获取绘图上下文 canvas.getContext(“2d")
  3. 绘图
  4. 绘制已定义的路径 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画图来画图&#xff0c;爱心、动画。 二、问题拆解 第一个是&#xff1a;canvas画图相关知识。 第二个是&#xff1a;动画相关内容。 三、知识背景 3.1 canvas画图相关内容 canvas画图的基本步骤 获取页面上的canvas标签对象获取绘图上下文…...

编程日记 2024/12/15 17:29:31

超标量处理器设计笔记（10） 寄存器重命名过程的恢复、分发

重命名 寄存器重命名过程的恢复使用 Checkpoint 对 RAT 进行恢复使用 WALK 对 RAT 进行恢复使用 Architecture State 对 RAT 进行恢复总结 分发&#xff08;Dispatch&#xff09; 寄存器重命名过程的恢复 当发生异常、分支预测失败时&#xff0c;指令占用 RAT、ROB 和 Issue …...

编程日记 2024/12/15 17:22:23

硬件设计-电源轨噪声对时钟抖动的影响

目录 定义 实际案例 总结 定义 首先了解抖动的定义&#xff0c;在ITU-T G.701中有关抖动的定义如下&#xff1a; 数字信号重要瞬间相对于其理想时间位置的短期非累积变化。 抖动是时钟或数据信号时序的短期时域变化。抖动包括信号周期、频率、相位、占空比或其他一些定时特…...

编程日记 2024/12/15 17:21:22

geeCache 一致性hash

目标&#xff1a;解决当自身结点没有改缓存时&#xff0c;从哪个结点获得这个缓存的问题 一、普通的hash算法 hash(Tom)%结点数量 缺点&#xff1a;缓存雪崩 缓存雪崩是指在某一时刻&#xff0c;大量缓存同时失效或宕机&#xff0c;导致大量请求直接访问数据库&#xff0c;从…...

编程日记 2024/12/15 17:12:14

【我的开源】ESCurlGen 一款 ElasticSearch curl 命令生成器

由于经常编写复杂的 Elasticsearch 查询&#xff0c;并通过代码生成查询条件&#xff0c;我发现每次使用 curl 请求 Elasticsearch 时&#xff0c;手动复制配置信息并构建 curl 命令的过程非常繁琐&#xff0c;尤其是在管理多个环境的情况下更为不便。因此&#xff0c;我利用 A…...

编程日记 2024/12/15 17:09:11

Python库NetworkX介绍

NetworkX 是一个用于创建、操作和研究复杂网络结构的 Python 库。它特别适用于图论和网络分析&#xff0c;提供了丰富的图形数据结构和许多常用的算法。无论是学术研究、数据科学还是实际应用&#xff0c;NetworkX 都是分析图网络和复杂关系的强大工具。 1. NetworkX的基本概述…...

编程日记 2024/12/15 17:08:09

Muduo网络库解析--网络模块(2)

前文 重写Muduo库实现核心模块的Git仓库 注&#xff1a;本文将重点剖析 Muduo 网络库的核心框架&#xff0c;深入探讨作者精妙的代码设计思路&#xff0c;并针对核心代码部分进行重写&#xff0c;将原本依赖 boost 的实现替换为原生的 C11 语法。需要说明的是&#xff0c;本文…...

编程日记 2024/12/15 17:02:02

【读书笔记】《论语别裁》语文的变与不变

1.内容摘要 在《论语别裁》第01章“学而”中&#xff0c;作者探讨了语言和文字的变与不变&#xff0c;通过中西文化的对比&#xff0c;分析了文字作为思想表达工具的独立性和持久性。作者指出&#xff0c;虽然外语&#xff08;如英语和法语&#xff09;在每三十年有明显变化&a…...

编程日记 2024/12/15 17:00:00

elasticsearch 使用预处理将JSON类型转换成Object类型

文章目录 使用 Ingest Pipeline 和 json 处理器示例&#xff1a;使用Ingest Pipeline 写入数据使用该Pipeline 在Elasticsearch&#xff08;ES&#xff09;中&#xff0c;您可以使用“预处理”&#xff08;通常是通过处理器、Ingest Pipeline等方式&#xff09;将JSON类型的数据…...

编程日记 2024/12/15 16:57:54

华为HarmonyOS NEXT 原生应用开发： 数据持久化存储（用户首选项）的使用 token令牌存储鉴权！

Preferences 数据持久化存储 用户首选项&#xff08;Preferences&#xff09; 1. 封装 仓库工具类 ● 这里可以选择将 数据字段 key 抽取为一个静态方法&#xff0c;这里选择让用户传参&#xff0c;看起来较容易理解&#xff01; /*** 首选项 preferences - 实现数据持久化…...

编程日记 2024/12/15 16:56:52

每天40分玩转Django：Django视图和URL

Django视图和URL 一、课程概述 学习项目具体内容预计用时视图基础函数视图、类视图、视图装饰器90分钟URL配置URL模式、路由系统、命名URL60分钟请求处理请求对象、响应对象、中间件90分钟 二、视图基础 2.1 函数视图 # blog/views.py from django.shortcuts import render…...

编程日记 2024/12/15 16:55:51

Kioptirx level4

具体步骤 通过nmap扫描我们所在的网段探测一下存活的主机&#xff0c;发现目标主机开放了80端口可以去访问一下 在访问的同时通过dirb去爆破一下目录&#xff0c;这边发现有一个john的目录不知道是什么可以去 这边在用dirsearch去扫一下防止有漏掉的页面我们没有访问到&#x…...

编程日记 2024/12/15 16:54:50

JPG 转 PDF：免费好用的在线图片转 PDF 工具

JPG 转 PDF&#xff1a;免费好用的在线图片转 PDF 工具 在日常工作和生活中&#xff0c;我们经常需要将图片转换为 PDF 格式。无论是制作电子文档、准备演示材料&#xff0c;还是整理照片集&#xff0c;将图片转换为 PDF 都是一个常见的需求。今天为大家介绍一款完全免费、无需…...

编程日记 2024/12/15 16:53:49

《Django 5 By Example》阅读笔记：p543-p550

《Django 5 By Example》学习第 19 天&#xff0c;p543-p550 总结&#xff0c;总计 8 页。 一、技术总结 1.fixtures (1)定义 A fixture is a collection of files that contain the serialized contents of the database. (2)作用 1)数据导入 一般来说&#xff0c;我们是…...

编程日记 2024/12/15 16:50:46

精品基于Python实现的微信小程序校园导航系统-微信小程序

[含文档PPT源码等] [包运行成功永久免费答疑辅导] 《django微信小程序校园导航系统》该项目采用技术Python的django框架、mysql数据库 &#xff0c;项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、核心代码介绍视频等 软件开发环境及开发工具&#xf…...

编程日记 2024/12/15 16:49:45

【数字花园】个人知识库网站搭建：①netlify免费搭建数字花园

目录 [[数字花园]]的构建原理包括三个步骤&#xff1a;五个部署方案教程相关教程使用的平台 步骤信息管理 这里记录的自己搭建数字花园&#xff08;在线个人知识库&#xff09;的经历&#xff0c;首先尝试的是网上普遍使用的方法&#xff0c;也就是本篇文章介绍的。 后面会继续…...

编程日记 2024/12/15 16:46:42

数据仓库工具箱—读书笔记01(数据仓库、商业智能及维度建模初步)

数据仓库、商业智能及维度建模初步 记录一下读《数据仓库工具箱》时的思考&#xff0c;摘录一些书中关于维度建模比较重要的思想与大家分享&#x1f923;&#x1f923;&#x1f923; 博主在这里先把这本书"变薄"~有时间的小伙伴可以亲自再读一读&#xff0c;感受一下…...

编程日记 2024/12/15 16:45:35

分布式 窗口算法 总结

前言 相关系列 《分布式 & 目录》《分布式 & 窗口算法 & 总结》《分布式 & 窗口算法 & 问题》 参考文献 《【算法】令牌桶算法》 固定窗口算法 简介 固定窗口算法是最简单的流量控制算法。固定窗口算法的核心原理是将系统的生命周期划分为一个个…...

编程日记 2024/12/15 16:43:31

docker容器内部启动jupyter notebook但是宿主机无法访问的解决方法

目录 1.问题2.解决方法 1.问题 在docker容器内启动了jupyter notebook&#xff0c;在宿主机内用如下的url无法访问 http://localhost:8888 http://127.0.0.1:8888 启动方法&#xff1a; jupyter notebook 2.解决方法 启动方法加上选项[ --ip‘*’]或者[–ip‘0.0.0.0’] 即启…...

编程日记 2024/12/15 16:40:28

2.2 数据库设计方法

数据库设计流程&#xff1a; 1.需求分析&#xff1a;准确了解分析用户需求&#xff08;包括数据与处理&#xff09;。需求分析是整个设计过程的基础&#xff0c;需求分析决定了构建数据库大厦的速度和质量 2.概念结构设计&#xff1a;概设结构设计是整个数据库设计的关键&…...

编程日记 2024/12/15 16:39:27

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/10 11:02:44

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/9 20:01:01

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2026/2/4 16:21:14

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2026/2/6 1:18:56

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2026/1/30 3:24:00

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/12/26 15:05:09