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

【前端】 canvas画图

news 2026/4/7 1:24:52

一、场景描述

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

Linux系统管理员必备命令大全

1. Linux命令概述作为一名Linux系统管理员&#xff0c;掌握常用命令是基本功。Linux命令是操作系统与用户交互的主要方式&#xff0c;通过命令行可以完成几乎所有系统管理任务。与图形界面相比&#xff0c;命令行操作更加高效、灵活&#xff0c;特别是在远程管理和自动化脚本方…...

编程新知 2026/4/7 1:07:49

内存屏障与volatile：并发编程的核心机制解析

1. 内存屏障与volatile的核心概念解析在并发编程领域&#xff0c;内存屏障和volatile是两个至关重要的底层技术。它们看似简单&#xff0c;却直接影响着程序的正确性和性能表现。理解这两个概念需要从计算机体系结构的多个层面进行分析。1.1 volatile关键字的本质作用volatile在…...

编程新知 2026/4/7 0:39:32

联邦学习实战解析：FedAvg算法在非独立同分布数据下的优化策略

1. FedAvg算法在非独立同分布数据中的核心挑战 非独立同分布&#xff08;Non-IID&#xff09;数据是联邦学习中最常见的现实场景。想象一下&#xff0c;十个不同地区的医院合作训练医疗影像模型&#xff1a;北京医院的CT扫描以肺部疾病为主&#xff0c;上海医院的数据集可能更多…...

编程新知 2026/4/7 0:21:28

TVA系统从安装到调优的关键节点把控

当AI智能体视觉检测系统&#xff08;TVA&#xff09;的硬件设备抵达现场&#xff0c;真正的挑战才刚刚开始。部署调试阶段是将蓝图变为现实的关键环节&#xff0c;其间遍布技术“暗礁”。作为一名现场工程师&#xff0c;您的严谨操作和问题预判能力&#xff0c;将直接决定系统上…...

编程新知 2026/4/7 0:03:21

ROS Noetic下，用DWA和TEB调教你的机器人：move_base局部规划器参数实战避坑指南

ROS Noetic下DWA与TEB局部规划器参数调优实战指南 1. 理解局部规划器的核心作用 在ROS导航堆栈中&#xff0c;局部规划器扮演着机器人运动控制的"末梢神经"角色。当全局规划器生成了一条从起点到终点的理想路径后&#xff0c;局部规划器负责根据实时环境信息&#xf…...

编程新知 2026/4/6 23:20:07

Linux运维实战：高效文件处理与终端管理技巧

1. 高效处理大文件的技巧1.1 安全删除大文件的方法在生产环境中处理大日志文件时&#xff0c;直接使用rm命令可能会导致系统IO负载过高。我遇到过多次因为删除200GB日志文件导致系统响应缓慢的情况。更安全的做法是&#xff1a;# 首先清空文件内容 > /path/to/file.log # 或…...

编程新知 2026/4/6 23:03:49

C# OPC连接方式实现上位机与PLC的通用通讯源码分享

C#连接OPC C#上位机链接PLC程序源码 1.该程序是通讯方式是CSharp通过OPC方式连接PLC&#xff0c;用这种方式连PLC不用考虑什么种类PLC&#xff0c;只要OPC服务器里有的PLC都可以连。 2.该资料包含程序&#xff0c;还有一些学习资料。C# 与 OPC 自动化接口深度实践&#xff1a…...

编程新知 2026/4/6 22:29:22

【花雕学编程】嵌入式 AI Agent：从云端到终端，开启物理世界智能新范式

【花雕学编程】嵌入式 AI Agent&#xff1a;从云端到终端&#xff0c;开启物理世界智能新范式 ——当 AI 不再只是屏幕里的聊天窗口&#xff0c;而是真正走进工厂、家庭和城市——嵌入式 AI Agent 正在重新定义“智能”的边界 引言 当下 AI 热潮的本质&#xff0c;是对“AI 从云…...

编程新知 2026/4/6 21:17:50

VS2022下载与全面使用指南

Visual Studio 2022&#xff08;简称VS2022&#xff09;是微软推出的最新一代集成开发环境&#xff08;IDE&#xff09;&#xff0c;于2021年11月正式发布&#xff0c;相比上一代VS2019&#xff0c;在性能优化、功能迭代、兼容性提升等方面实现了全方位升级&#xff0c;被誉为“…...

编程新知 2026/4/6 19:51:07

动态分区算法实战：首次适应与最佳适应的内存管理对比

1. 动态分区算法入门&#xff1a;内存管理的两大核心策略 想象你是一个仓库管理员&#xff0c;面对一堆大小不一的货物和不断变化的存取需求&#xff0c;如何高效利用有限空间&#xff1f;这就是操作系统内存管理要解决的核心问题。动态分区算法中的**首次适应&#xff08;Firs…...

编程新知 2026/4/6 17:59:39