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

Canvas知识框架

news 来源：原创 2025/7/1 0:48:24

一、Canvas基础

核心概念
- Canvas是位图绘图区域，通过JavaScript（或Python等）动态绘制图形。
- 坐标系：左上角为原点 (0, 0)，x向右递增，y向下递增。
- 绘图流程：
```
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d'); // 获取2D渲染上下文
```
基本绘图指令
- 路径绘制：
  - beginPath() 开始路径
  - moveTo(x, y) 移动画笔
  - lineTo(x, y) 画线
  - arc(x, y, radius, startAngle, endAngle) 画弧
  - closePath() 闭合路径
  - stroke() 描边 / fill() 填充
- 矩形：
  - rect(x, y, width, height)
  - strokeRect() / fillRect()
样式控制
- 颜色：strokeStyle, fillStyle（支持HEX、RGB、RGBA）
- 线宽：lineWidth
- 线型：lineCap（端点样式）, lineJoin（拐角样式）
- 阴影：shadowColor, shadowBlur, shadowOffsetX/Y

二、高级绘图技术

变换与状态管理
- 平移：translate(x, y)
- 旋转：rotate(angle)
- 缩放：scale(sx, sy)
- 状态栈：save() 和 restore() 保存/恢复绘图状态（样式、变换等）。
图像操作
- 绘制图像：drawImage(image, x, y, width, height)
- 图像裁剪：drawImage 的9参数版本。
- 像素操作：getImageData() / putImageData() 直接操作像素数据。
文本绘制
- fillText(text, x, y) / strokeText(text, x, y)
- 字体样式：font（如 '20px Arial'）
- 对齐：textAlign, textBaseline
复合与裁剪
- 全局透明度：globalAlpha
- 混合模式：globalCompositeOperation（如 'source-over', 'lighter'）
- 裁剪路径：clip()

三、动画与交互

动画基础
- 使用 requestAnimationFrame 实现帧循环。
- 清除画布：clearRect(0, 0, width, height)。
- 示例：移动小球动画。

事件交互

监听鼠标/触摸事件：

canvas.addEventListener('click', (e) => {const x = e.clientX - canvas.offsetLeft;const y = e.clientY - canvas.offsetTop;// 绘制交互图形
});

性能优化
- 避免频繁重绘（使用离屏Canvas缓存复杂图形）。
- 减少不必要的状态变更（如重复设置样式）。

四、常见应用场景

游戏开发
- 精灵（Sprite）渲染、碰撞检测、粒子效果。
数据可视化
- 动态图表、自定义进度条、地图绘制。
图像处理
- 滤镜（灰度、模糊）、像素级操作（如边缘检测）。
创意绘图
- 分形图形、生成艺术、手写板。

五、扩展知识

WebGL（3D Canvas）
- 通过 canvas.getContext('webgl') 进入3D绘图领域。
Canvas库
- 简化库：Fabric.js、Konva.js、Paper.js。
跨平台框架
- 移动端：React Native Canvas、Flutter CustomPaint。

六、调试与工具

调试技巧
- 使用 console.log 输出绘图状态。
- 检查Canvas尺寸是否被CSS拉伸（需显式设置width/height属性）。
开发工具
- Chrome开发者工具：检查Canvas元素、捕获帧。

七、Python中的Canvas（如Tkinter）

Tkinter Canvas
- 基础绘图：create_line(), create_rectangle(), create_oval()。
- 交互：bind() 事件绑定（如 <Button-1>）。
- 动画：通过 after() 定时更新。

学习建议

动手实践：从简单图形（如时钟、贪吃蛇）开始。
参考文档：
- MDN Canvas教程
- Tkinter官方文档（Python方向）。

通过掌握以上框架，你可以逐步深入Canvas的各类应用场景，结合项目需求灵活运用绘图技术。

Canvas知识框架

一、Canvas基础核心概念 Canvas是位图绘图区域，通过JavaScript（或Python等）动态绘制图形。坐标系：左上角为原点 (0, 0)，x向右递增，y向下递增。绘图流程： const canvas document.getElemen…...

编程日记 2025/7/1 0:48:24

【SSL证书系列】客户端如何验证https网站服务器发的证书是否由受信任的根证书签发机构签发

客户端验证HTTPS网站证书是否由受信任的根证书颁发机构（CA）签发，是一个多步骤的过程，涉及证书链验证、信任锚（Trust Anchor）检查、域名匹配和吊销状态验证等。以下是详细的验证流程： 1. 证书链的…...

编程日记 2025/6/29 0:56:42

spark小任务

import org.apache.spark.{Partitioner, SparkConf, SparkContext}object PartitionCustom {// 分区器决定哪一个元素进入某一个分区// 目标: 把10个分区器，偶数分在第一个分区，奇数分在第二个分区// 自定义分区器// 1. 创建一个类继承Partitioner// 2. …...

编程日记 2025/6/30 23:44:08

git push 报错：send-pack: unexpected disconnect while reading sideband packet

背景新建了一个仓库，第一次push 代码文件，文件中有一个依赖的jar，有80MB，结果push的时候报错。错误信息 error: RPC failed; HTTP 500 curl 22 The requested URL returned error: 500 send-pack: unexpected disconnect whi…...

编程日记 2025/6/30 23:42:17

读入csv文件写入MySQL

### 使用 Spark RDD 读取 CSV 文件并写入 MySQL 的实现方法 #### 1. 环境准备在使用 Spark 读取 CSV 文件并写入 MySQL 数据库之前，需要确保以下环境已配置完成： - 添加 Maven 依赖项以支持 JDBC 连接。 - 配置 MySQL 数据库连接参数，包括 …...

编程日记 2025/7/1 0:23:13

5.18-AI分析师

强化练习1 神经网络训练案例（SG） #划分数据集 #以下5行需要背 folder datasets.ImageFolder(rootC:/水果种类智能训练/水果图片, transformtrans_compose) n len(folder) n1 int(n*0.8) n2 n-n1 train, test random_split(folder, [n1, n2]) #训…...

编程日记 2025/6/30 23:43:11

腾讯云运营开发 golang一面

redis为什么单线程会快每秒10w吞吐量 io多路复用一个文件描述符整体拷贝；调用epoll_ctl 单个传递内核遍历文件描述符判断是否有事件发送；回调函数列表维护修改有事件发送的socket为可读或可写，返回整个文件描述符；返回链…...

编程日记 2025/7/1 0:06:03

spark数据压缩

### Spark 数据压缩方法及其实现在大数据处理框架中，数据压缩是一个重要的环节，它不仅能够减少磁盘占用空间，还能降低网络传输成本。然而，在分布式计算环境中（如 Spark），选择合适的压缩编解码…...

编程日记 2025/6/30 23:59:16

synchronized关键字详解

synchronized关键字详解 1. 基本概念与使用方式作用：确保多个线程在访问共享资源时的互斥性，防止数据不一致。使用方式：修饰实例方法：锁对象为当前实例（this）。public synchronized void instanceMethod() {// 同步代码 }修饰静态方法：锁对象为类的Class对象。public…...

编程日记 2025/6/30 23:13:57

React useState 的同步/异步行为及设计原理解析

一、useState 的同步/异步行为异步更新（默认行为） • 场景：在 React 合成事件（如 onClick）或生命周期钩子（如 useEffect）中调用 useState 的更新函数时，React 会将这些更新放入队列…...

编程日记 2025/6/29 1:10:46

《社交应用动态表情：RN与Flutter实战解码》

React Native依托于JavaScript和React，为动态表情的实现开辟了一条独特的道路。其核心优势在于对原生模块的便捷调用，这为动态表情的展示和交互提供了强大支持。在社交应用中，当用户点击发送动态表情时，React Native能够迅速调用相…...

编程日记 2025/6/28 22:55:51

【Oracle专栏】清理告警日志、监听日志

Oracle相关文档，希望互相学习，共同进步风123456789～-CSDN博客 1.背景今天在导入数据库时，发现之前可以导入，今天导入时居然报空间不足，于是检查是哪里占用空间比较大。检查回收站、归档日志，发现没有。然后检查告警日志、监听日志，发现果然占用空间比较大，于是进行…...

编程日记 2025/6/29 1:24:23

Ubuntu24.04编译ORB_SLAM的一系列报错解决

Ubuntu24.04编译ORB_SLAM的一系列报错解决 decay_t报错报错信息：error: ‘decay_t’ is not a member of ‘std’；did you mean ‘decay’ 将CMakeLists.txt中第17行的c标准修改为c14即可： 修改前： CHECK_CXX_COMPILER_FLAG…...

编程日记 2025/6/28 22:55:47

Python × CARLA：如何在自动驾驶仿真世界里打造智能驾驶系统？

Python CARLA：如何在自动驾驶仿真世界里打造智能驾驶系统？在人工智能与自动驾驶的浪潮中，真实世界的测试成本高昂，而自动驾驶仿真已成为开发者训练和测试 AI 驾驶算法的关键技术手段。其中，CARLA（Car Learning to Act）作为开源自动驾驶仿真平台，凭借其真实感强、高度…...

编程日记 2025/6/29 1:30:33

如何迁移 WSL 卸载 Ubuntu WSL

迁移 WSL 到其他盘区假设您已经安装了 WSL 上的 Ubuntu 22.04 LTS，并且想要将其从 C 盘迁移到 D 盘。查看 WSL 状态： 打开 PowerShell 或 CMD，运行以下命令查看当前安装的 WSL 发行版： wsl -l -v假设输出显示 Ubuntu-22.04 正在…...

编程日记 2025/6/28 22:55:49

【Linux】多路转接epoll、Linux高并发I/O多路复用

编程日记 2025/6/29 0:56:21

【taro3 + vue3 + webpack4】在微信小程序中的请求封装及使用

前言正在写一个以taro3 vue3 webpack4为基础框架的微信小程序，之前一直没有记咋写的，现在总结记录一下。uniapp vite 的后面出。文章目录前言一、创建环境配置文件二、配置 Taro 环境变量三、创建请求封装四、如何上传到微信小程序体验版1.第二…...

编程日记 2025/6/28 23:44:46

在python中使用Json提取数据

文章目录一、前言二、格式转换2.1 dumps函数2.2 loads函数2.3 错误处理三、JSONPath模块四、JMESPath模块4.1 search函数4.2 基本语法4.2.1 基本查询4.2.2 投影4.2.3 管道4.2.4 多选4.2.5 函数一、前言官方文档：https://docs.python.org/zh-cn/3.12/library/js…...

编程日记 2025/6/29 1:09:06

备战菊厂笔试4

目录 39.组合总和回溯（单向剪枝） 3102.最小化曼哈顿距离利用曼哈顿距离的性质 3163.压缩字符串3 46.全排列 53.最大子数组和 39.组合总和 39. 组合总和注意： set不能添加list得加元组元组不可修改 sorted后得赋值 class So…...

编程日记 2025/6/29 1:28:57

白盒测试——基本路径测试法

一、实验名称白盒测试——基本路径测试法二、实验目的白盒测试是结构测试，是依据被测程序的内部逻辑结构设计测试用例，驱动被测程序运行完成的测试，通过本实验希望： 1、掌握基本路径测试法的基本概念，用具体的例子…...

编程日记 2025/6/28 22:55:54

FFmpeg 与 C++ 构建音视频处理全链路实战（五）—— 音视频编码与封装

在前面的系列文章中，我们已经层层深入，从 MP4 与 FLV 封装格式的剖析，到 H.264 和 AAC 原理的探索，再到 FFmpeg 的解封装、解码，以及音频重采样、视频尺寸变化的代码实现，为音视频处理打下了坚实基础。而今…...

编程日记 2025/6/29 0:19:13

NNLM神经网络语言模型总结

一开始还以为很复杂，总结一下就是： NNLM 将某个单词前 n−1 个词各自转为 embedding，拼接成一个 (n−1)⋅d 维的向量，再通过隐藏层输出层 softmax，预测下一个词的概率分布可以发现，这个2003年提出的模…...

编程日记 2025/6/28 23:31:10

开源Heygem本地跑AI数字人视频教程

图文教程： 点击跳转视频教程资料包下载点击下载：...

编程日记 2025/6/28 23:24:27

软件验收测试有哪些流程?与确认测试又有什么不同?

随着信息技术的飞速发展，软件的应用覆盖面越来越广泛，软件验收测试的重要性也愈发显著。软件验收测试是指在软件开发完成后，对软件进行的最后一次全面审核，以确保软件的功能和性能满足用户需求。这一阶段通常由客户进行&#xff0…...

编程日记 2025/6/29 0:11:50

一文了解 HTTP Content-Type：从基础到实战

一文了解 HTTP Content-Type：从基础到实战在 Web 开发中，HTTP 请求头中的 Content-Type 是一个看似简单却至关重要的概念。它决定了浏览器和服务器如何解析和处理传输的数据。本文将带你全面掌握 Content-Type 的核心知识，涵盖常见类型、应…...

编程日记 2025/6/29 1:00:18

数学建模初等模型应用

一、目的掌握初等模型的建模方法,对简单的初等模型能借助Matlab工具软件进行辅助建模、求解和检验。二、实验内容与设计思想（设计思路、主要代码分析） 1、预测鱼的质量 （1）设计思路：使用线性回归模型预测鱼的质量…...

编程日记 2025/6/29 0:36:37

map和unordered_map

一、map和unordered_map的基本概念——它们是啥？ map：是一种“有序的关联容器”，存放一组“键值对”，内部元素按键排序（默认是升序），类似一本按字母排序的字典。 unordered_map：也是…...

编程日记 2025/6/29 0:31:36

【vue】脚手架

一、使用脚手架创建项目 1.打开编辑器终端 2.输入命令vue create 项目名 3.选择自定义配置，选以下几种常用的配置项（空格选中或删除） 二、常规操作进入项目：cd 项目名返回：cd .. 运行项目:npm run serve 停止项目:ct…...

编程日记 2025/6/29 0:26:13

PaddleNLP框架训练模型：使用SwanLab教程

PaddleNLP 是一款基于飞桨深度学习框架的大语言模型(LLM)开发套件，支持在多种硬件上进行高效的大模型训练、无损压缩以及高性能推理。PaddleNLP 具备简单易用和性能极致的特点，致力于助力开发者实现高效的大模型产业级应用。你可以使用PaddleNLP快速进行…...

编程日记 2025/6/28 23:47:27

#include<stdio.h> #include<stdlib.h> #define TRUE 1 #define FASLE 0//定义宏标识判断是否成功 typedef struct Node {int data;struct Node* next; }Node;Node* InitList() {Node* list (Node*)malloc(sizeof(Node));list->data 0;//创建节点保存datalist…...

编程日记 2025/6/28 23:54:00

数据结构：ArrayList简单实现与常见操作实例详解

目录 1.顺序表概念 2.自己实现 1.准备工作接口 MyArrayList的定义 2.具体接口实现添加判满扩容查找获得pos位置的值和更改pos位置的值判空删除得到数组长度清空数组打印 3.ArrayList 1.简介 2.使用 1.ArrayList的构造无参构造有参构造&a…...

编程日记 2025/6/28 22:55:48

C++之fmt库介绍和使用(1)

C之fmt库介绍与使用(1) Author: Once Day Date: 2025年5月12日一位热衷于Linux学习和开发的菜鸟，试图谱写一场冒险之旅，也许终点只是一场白日梦… 漫漫长路，有人对你微笑过嘛… 全系列文章可参考专栏: 源码分析_Once-Day的博客-CSDN博客 …...

编程日记 2025/6/29 1:32:47

嵌入式自学第二十一天（5.14）

gdb逻辑调试器: gcc 调试，发行版 gcc -g 调试版本，体积大，有源码。一般调试：gdb a.out b n.c:行数 ：设置断点，运行到这个位置，程序暂停。（可以直接加行数） r运行 n执行下…...

编程日记 2025/6/29 0:45:38

位与运算

只有当除数是 2 的幂次方（如 2、4、8、16...）时，取模运算才可以转换为位运算。 int b 19;int a1 b % 16; // 传统取模运算int a2 b & 15; // 位运算替代取模printf("b %d\n", b);printf("b %% 8 %d\n",…...

编程日记 2025/6/29 0:01:17

SparkSQL操作Mysql（2）

创建数据库和表我们去创建一个新的数据库，数据表，并插入一条数据。参考代码如下： -- 创建数据库 CREATE DATABASE spark; -- 使用数据库 USE spark; -- 创建表 create table person(id int, name char(20), age int); -- 插入示例数…...

编程日记 2025/6/29 0:05:18

Linux 中 open 函数的本质与细节全解析

一、open简介在 Linux 下，一切皆文件。而对文件的读写，离不开文件的“打开”操作。虽然 C 语言标准库提供了方便的 fopen，但更底层、更强大的是系统调用 open，掌握它能让你对文件系统控制更细致，在系统编程、驱动开发…...

编程日记 2025/6/28 23:12:46

对抗系统熵增：从被动救火到主动防御的稳定性实战

📕我是廖志伟，一名Java开发工程师、《Java项目实战——深入理解大型互联网企业通用技术》（基础篇）、（进阶篇）、（架构篇）清华大学出版社签约作家、Java领域优质创作者、CSDN博客专家、…...

编程日记 2025/6/29 0:35:25

高速系统设计实例设计分析二

6.6 仿真约束的生成和实施进行到这一步，我们已经完成了对实例进行仿真的所有条件的设置，包括对板子的设计要求分析和预布局处理。虽然从技术上讲，我们可以开始进行仿真分析并生成设计的约束，但是根据作者的工作经验，…...

编程日记 2025/6/29 1:28:22

AUTOSAR图解==＞AUTOSAR_SWS_V2XGeoNetworking

AUTOSAR V2X GeoNetworking 模块分析车联网地理网络协议解析与实现目录 1. 概述2. 模块架构分析 2.1 AUTOSAR V2X GeoNetworking 在BSW架构中的位置 2.1.1 架构层次说明2.1.2 模块间关系 2.2 V2X GeoNetworking 模块内部组件结构 2.2.1 核心组件2.2.2 接口说明 3. 消息处理…...

编程日记 2025/6/29 9:00:17

在 Rocky Linux 上手动安装 zsh

目录 🧩 一、准备：检查是否已经安装Zsh 🛠️ 二、从源码安装 Zsh（推荐方式） 1. 下载 Zsh 源码 2. 解压源码 3. 配置安装路径（到你的 home 目录下） 4. 编译并安装 🧪 三、测试…...

编程日记 2025/6/29 0:13:58

Vector和list

一、Vector和list的区别——从“它们是什么”到“区别在哪儿” 1. 它们是什么？ Vector：类似于一排排整齐的书架（数组），存放元素时，元素排成一条线，连续存储。可以很快通过编号（索引…...

编程日记 2025/6/28 22:56:04

人工智能外呼系统：重构智能交互的全维度进化

在数字化浪潮席卷全球的今天，人工智能外呼系统正以其颠覆性的技术革新，重新定义企业与客户的沟通范式。这一融合语音识别、自然语言处理与机器学习的智能系统，不仅实现了从 “机械应答” 到 “智慧交互” 的跨越，更在金融、医疗、…...

编程日记 2025/6/29 0:52:04

嵌入式培训之数据结构学习（三）gdb调试

一、gdb调试 （一）一般调试步骤与命令 1、gcc -g （调试版本，内含调试信息与源码；eg：gcc -g main.c linklist.c） 2、gdb a.out（调试可执行文件，eg：gdb ./a.o…...

编程日记 2025/6/28 23:40:07

元宇宙赛道新势力：成都芯谷产业园创新业务如何重构产业格局

成都芯谷产业园在元宇宙有啥新搞头？看看它的创新业务怎么改变行业！ 成都芯谷产业园在元宇宙赛道上的创新业务，核心在于系统性构建一个开放、协同、高效的元宇宙创新生态系统，以此重构产业格局。这并非简单的企业物理聚集&#xf…...

编程日记 2025/6/28 22:55:58

Java 日期解析与格式化：从标准格式到自然语言解析

使用 Java 搭配 Apache Commons Lang3 和 Natty 库，实现灵活高效的日期解析与格式化。一、背景将不同格式的日期统一成一个格式。日期格式可能有以下几种类型： 标准格式：2024-02-28、14/05/2022、2002年5月6日非英文月份缩写：…...

编程日记 2025/6/28 22:55:57

【windows server脚本每天从网络盘复制到本地】

windows server脚本每天从网络盘复制到本地调试模板 echo off :: 显示详细操作 echo echo 执行批处理文件：文件复制任务 echo :: 配置参数 set sourcePath\\network_drive\shared_folder :: 网络盘路径 set destinationPathC:\LocalBackup :: 本地保…...

编程日记 2025/6/28 23:50:52

GraphPad Prism简介、安装与工作界面

GraphPad Prism图表可视化与统计数据分析（视频教学版） - 商品搜索 - 京东 1.1 GraphPad Prism简介 GraphPad Prism 将科学绘图、综合曲线拟合（包括非线性回归）、易于理解的统计分析以及数据管理功能集于一身，帮助用…...

编程日记 2025/6/28 23:41:31

尚硅谷阳哥JVM

文章目录第01章 JVM快速入门1、什么是JVM2、主流虚拟机有哪些？3、结构图3、执行引擎Execution Engine4、本地方法接口Native Interface5、Native Method Stack6、PC寄存器(程序计数器) 第02章类加载器ClassLoader1、类的加载过程2、类加载器的作用3、类加载器分类…...

编程日记 2025/6/29 0:55:47