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

【前端】 canvas画图

news 2026/4/7 0:35:09

一、场景描述

利用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

CCLE数据库实战指南：从数据下载到肝癌细胞系分析

1. CCLE数据库入门指南 第一次接触CCLE数据库时&#xff0c;我和大多数新手一样感到无从下手。这个由Broad研究所维护的癌症细胞系百科全书&#xff0c;包含了超过1000种人类癌症细胞系的基因组、转录组和药理学数据。对于肝癌研究者来说&#xff0c;它就像一座待挖掘的金矿。 …...

编程新知 2026/4/7 0:07:22

[具身智能-241]：从OpenCV到CNN：人类认知模式在计算机视觉中的投影

人类大脑认知的两种模式&#xff1a;确定性的逻辑推演模式 不确定性的直觉经验模式&#xff0c;前者即“非此即彼的计算机技术”&#xff0c;后者即“数据经验主义的人工智能技术”。 人类的自然语言是模糊的&#xff0c;视觉亦是如此&#xff0c;OpenCV和CNN是这种思维模式的…...

编程新知 2026/4/6 22:25:20

3大核心功能提升50%英雄联盟操作效率的开源工具

3大核心功能提升50%英雄联盟操作效率的开源工具 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾在排位赛中因手速慢错过最佳英雄选择时…...

编程新知 2026/4/6 21:46:13

Golang笔记1-变量与类型

Go 变量与类型 1. 怎么声明变量 // var 写法&#xff1a;可以在函数外用&#xff08;全局&#xff09; var name string "张三" var age int 25 var isAdmin bool // 不赋值就是零值// : 短声明&#xff1a;只能在函数内用&#xff08;日常首选&#xff09; name :…...

编程新知 2026/4/6 21:36:06

独立创业自动化系统构建指南：从副业到被动收入的实践路径

独立创业自动化系统构建指南&#xff1a;从副业到被动收入的实践路径 【免费下载链接】opc-methodology 《一人企业方法论》第二版&#xff0c;也适合做其他副业&#xff08;比如自媒体、电商、数字商品&#xff09;的非技术人群。 项目地址: https://gitcode.com/GitHub_Tre…...

编程新知 2026/4/6 21:15:44

告别重复劳动：用快马ai为ubuntu系统生成自动化运维效率工具

告别重复劳动&#xff1a;用快马AI为Ubuntu系统生成自动化运维效率工具 作为一名长期使用Ubuntu系统的开发者&#xff0c;我经常需要处理各种重复性的运维任务&#xff0c;比如查看日志、备份文件、监控系统资源等。这些工作虽然简单&#xff0c;但日复一日地手动操作不仅耗时…...

编程新知 2026/4/6 18:44:28

Python Docker镜像性能调优：5个关键优化策略

Python Docker镜像性能调优&#xff1a;5个关键优化策略 【免费下载链接】python Docker Official Image packaging for Python 项目地址: https://gitcode.com/gh_mirrors/python6/python Python Docker镜像性能调优是提升应用部署效率和运行速度的关键环节。本文将分享…...

编程新知 2026/4/6 17:11:22

如何利用WebSocket实现biliup的实时直播状态监控与日志推送：完整指南

如何利用WebSocket实现biliup的实时直播状态监控与日志推送&#xff1a;完整指南 【免费下载链接】biliup 自动直播录制、投稿、twitch、ytb频道搬运工具。命令行投稿(B站)和视频下载工具&#xff0c;提供多种登录方式&#xff0c;支持多p。 项目地址: https://gitcode.com/g…...

编程新知 2026/4/6 16:59:16

LANCZOS智能压缩+RGB自动转换：Anything to RealCharacters预处理模块详解

LANCZOS智能压缩RGB自动转换&#xff1a;Anything to RealCharacters预处理模块详解 1. 项目概述 Anything to RealCharacters是一款专为RTX 4090显卡设计的2.5D转真人图像转换系统。该系统基于通义千问Qwen-Image-Edit-2511图像编辑模型&#xff0c;集成了专门优化的写实化权…...

编程新知 2026/4/6 16:55:13

别只盯着表达量！单基因功能挖掘：LinkedOmics相关性分析与STRING互作网络实战指南

单基因功能深度挖掘&#xff1a;从相关性分析到互作网络的系统研究策略 在生物医学研究中&#xff0c;单基因分析往往被简化为差异表达检验&#xff0c;这种局限视角可能掩盖了基因在复杂生物网络中的多维作用。当我们在TCGA数据中发现某个基因在特定癌症中表达异常时&#xff…...

编程新知 2026/4/6 16:47:12