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

【前端】 canvas画图

news 2026/1/13 6:27:05

一、场景描述

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

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/1/9 3:15:23

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/12/31 23:03:50

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/10/1 2:59:48

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/1 1:25:51

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/10/20 9:03:01

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2026/1/12 17:43:16