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

Canvas入门教程！！【Canvas篇二】

article 2025/10/17 3:40:16

没有一朵花，从一开始就是花。

目录

  • translate() 方法：
  • rotate() 方法：
  • scale() 方法：

translate() 方法：

Canvas 2D API 的 CanvasRenderingContext2D.translate() 方法用于对当前网格添加平移变换。
translate() 方法通过在网格上将画布和原点水平移动 x 单位和垂直移动 y 单位，向当前矩阵添加一个平移变换。
移动画板的坐标系的原点（不是移动画板）

translate(x, y)

在这里插入图片描述
上图为网络截取，侵权联系删除。

  • x：在水平方向上移动的距离。正值向右移动，负值向左移动。
  • y：在垂直方向上移动的距离。正值向下移动，负值向上移动。

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>translate属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 移动的正方形ctx.translate(110, 30);ctx.fillStyle = "red";ctx.fillRect(0, 0, 80, 80);// 重置当前的变换矩阵为单位矩阵ctx.setTransform(1, 0, 0, 1, 0, 0);// 未移动的正方形ctx.fillStyle = "gray";ctx.fillRect(0, 0, 80, 80);</script>
</body></html>

在这里插入图片描述

rotate() 方法：

Canvas 2D API 的 CanvasRenderingContext2D.rotate() 方法用于在变换矩阵中增加旋转。

rotate(angle)
  • angle：顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。
    在这里插入图片描述
    示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rotate属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 变换原点ctx.arc(0, 0, 5, 0, 2 * Math.PI);ctx.fillStyle = "blue";ctx.fill();// 未旋转的矩形ctx.fillStyle = "gray";ctx.fillRect(100, 0, 80, 20);// 旋转的矩形ctx.rotate((45 * Math.PI) / 180);ctx.fillStyle = "red";ctx.fillRect(100, 0, 80, 20);// 将变换矩阵重置为单位矩阵ctx.setTransform(1, 0, 0, 1, 0, 0);</script>
</body></html>

在这里插入图片描述

scale() 方法：

Canvas 2D API 的 CanvasRenderingContext2D.scale() 方法用于根据水平和垂直方向，为 canvas 单位添加缩放变换。
官方解释：
默认情况下，在 canvas 中一个单位实际上就是一个像素。例如，如果我们将 0.5 作为缩放因子，最终的单位会变成 0.5 像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将 2.0 作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。

scale(x, y)
  • x：水平方向的缩放因子。负值会将像素沿垂直轴翻转。值为 1 表示没有水平缩放。
  • y：垂直方向的缩放因子。负值会将像素沿水平轴翻转。值为 1 表示没有垂直缩放。
  • 无返回值。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>scale</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 缩放后的矩形ctx.scale(9, 3);ctx.fillStyle = "red";ctx.fillRect(10, 10, 8, 20);// 将当前变换矩阵重置为单位矩阵ctx.setTransform(1, 0, 0, 1, 0, 0);// 未缩放的矩形ctx.fillStyle = "gray";ctx.fillRect(10, 10, 8, 20);</script>
</body></html>

在这里插入图片描述

相关文章：

Canvas入门教程！！【Canvas篇二】

没有一朵花&#xff0c;从一开始就是花。 目录 translate() 方法&#xff1a;rotate() 方法&#xff1a;scale() 方法&#xff1a; translate() 方法&#xff1a; Canvas 2D API 的 CanvasRenderingContext2D.translate() 方法用于对当前网格添加平移变换。 translate() 方法通…...

编程日记 2025/10/10 23:29:31

【中级软件设计师】函数调用 —— 传值调用和传地址调用 (附软考真题)

【中级软件设计师】函数调用 —— 传值调用和传地址调用 (附软考真题) 目录 【中级软件设计师】函数调用 —— 传值调用和传地址调用 (附软考真题)一、历年真题二、考点&#xff1a;函数调用 —— 传值调用和传地址调用&#x1f53a;1、传值调用&#x1f53a;2、传引用(地址)调…...

编程日记 2025/9/29 17:06:16

第七届能源系统与电气电力国际学术会议（ICESEP 2025)

重要信息 时间&#xff1a;2025年6月20-22日 地点&#xff1a;中国-武汉 官网&#xff1a;www.icesep.net 主题 能源系统 节能技术、能源存储技术、可再生能源、热能与动力工程 、能源工程、可再生能源技术和系统、风力发…...

编程日记 2025/10/8 23:33:28

大数据分析04 数据查询分析

构建数据源 引入pandas包 数据map中ID为列&#xff0c;值为行&#xff0c;每一列中值个数要一致 import pandas as pd data {ID: [000001, 000002, 000003, 000004, 000005, 000006, 000007],name:[黎明, 赵怡春, 张富平, 白丽, 牛玉德, 姚华, 李南], gender:[True, False, …...

编程日记 2025/10/3 3:01:32

ADVB协议同步

关于视频传输&#xff0c;有多种控制时序。协议标准允许设计者选择有限的几个速率的接口来满足 系统设计目标。例如&#xff0c;一些系统使用总线时序发送信息通过line-by-line;在这个案例中&#xff0c; 容器的sof作为vsync同步的点。horizontal line blanding将插入idles,ADV…...

编程日记 2025/10/5 12:10:04

【kafka初学】启动执行命令

接上篇&#xff0c;启动&#xff1a;开两个cdm窗口 注意放的文件不要太深或者中文&#xff0c;会报命令行太长的错误 启动zookeeper bin\windows\zookeeper-server-start.bat config\zookeeper.properties2. 启动kafka-serve bin\windows\kafka-server-start.bat config\serv…...

编程日记 2025/10/5 18:10:51

论文阅读笔记——π0.5: a Vision-Language-Action Model with Open-World Generalization

π0.5 论文 通过异构数据协同训练与分层推理&#xff0c;用中等规模的目标数据&#xff08;400小时&#xff09;实现了大规模泛化能力&#xff0c;为现实世界机器人学习提供了新范式。 高层推理(high-level) 根据当前观测和任务指令预测子任务&#xff08;如“打开抽屉”&…...

编程日记 2025/10/16 12:31:12

电子削铅笔刀顺序图详解：从UML设计到PlantUML实现

题目&#xff1a;为电子削铅笔刀建立一个顺序图和一个通信图。图中的对象包括操作者、铅笔、插入点(也就是铅笔插入铅笔刀的位置)、马达和其他元素。包括哪些交互消息?有那些激活?如何在图中表示出自身调用。 一、顺序图概述 顺序图&#xff08;Sequence Diagram&#xff09…...

编程日记 2025/10/16 12:31:04

FWFT_FIFO和Standard_FIFO对比仿真

在FPGA中使用FIFO时&#xff0c;如果使用FPGA厂商提供的FIFO IP&#xff0c;一般都会有First Word Fall Through FIFO和Standard FIFO类型选项&#xff0c;那么这两种FIFO有什么差异么。两种FIFO的端口是一样的&#xff0c;看不出区别&#xff0c;只有通过仿真&#xff0c;才能…...

编程日记 2025/10/16 12:31:01

什么是可重入锁ReentrantLock?

大家好&#xff0c;我是锋哥。今天分享关于【什么是可重入锁ReentrantLock?】面试题。希望对大家有帮助&#xff1b; 什么是可重入锁ReentrantLock? ReentrantLock 是 Java 中的一个锁实现&#xff0c;它是 java.util.concurrent.locks 包中的一部分&#xff0c;主要用于提供…...

编程日记 2025/10/16 12:30:57

利用JMeter代理服务器方式实现高效压测

前言 在当今快节奏的互联网时代&#xff0c;确保Web应用和服务能够在高负载下稳定运行变得至关重要。无论是电子商务平台、社交媒体网络还是在线教育服务&#xff0c;用户对网站响应速度和稳定性的期望从未如此之高。因此&#xff0c;性能测试不再是一个可选项&#xff0c;而是…...

编程日记 2025/10/16 12:30:54

WSL 安装过程整理

WSL 安装过程整理 一、WSL 安装教程二、安装后小技巧1、安装位置2、常用命令 三、在 WSL2 中安装 perf&#xff1a; 一、WSL 安装教程 史上最全的WSL安装教程 WSL2 最新最全帮助小白一步步详细安装教程 在WSL2 root 和普通用户的切换 轻松搬迁&#xff01;教你如何将WSL从C盘迁…...

编程日记 2025/10/16 12:30:51

【go】简单理解梳理go的内存分配原理

Go 内存分配机制原理 Go 的内存分配机制设计非常精细&#xff0c;结合了多级缓存、对象池和垃圾回收等机制&#xff0c;以实现高并发下的高性能分配。 1. 整体内存结构 Go 程序启动时&#xff0c;运行时会向操作系统申请一大块连续内存区域&#xff08;heap arena&#xff0…...

编程日记 2025/8/8 0:48:14

GStreamer 简明教程（十一）：插件开发，以一个音频生成（Audio Source）插件为例

系列文章目录 GStreamer 简明教程&#xff08;一&#xff09;&#xff1a;环境搭建&#xff0c;运行 Basic Tutorial 1 Hello world! GStreamer 简明教程&#xff08;二&#xff09;&#xff1a;基本概念介绍&#xff0c;Element 和 Pipeline GStreamer 简明教程&#xff08;三…...

编程日记 2025/10/3 19:32:43

【阿里云大模型高级工程师ACP学习笔记】2.1 用大模型构建新人答疑机器人

学习目标 在备考阿里云大模型高级工程师ACP认证时，学习《2.1用大模型构建新人答疑机器人》这部分内容，主要是为了掌握利用大模型技术构建高效答疑机器人的方法，提升在大模型应用开发领域的专业能力。具体目标如下： 掌握大模型API调用：学会通过API调用通义千问大模型，熟悉…...

编程日记 2025/8/3 9:12:48

嵌入式鸿蒙系统环境搭建与配置要求实现01

各位开发者大家好，今天主要给大家分享一下，鸿蒙系统的环境配置实现。 第一：鸿蒙配置基本要求 对电脑的要求，虚拟机配置建议 200GB 硬盘大小，10GB 内存，4*2CPU。 安装必要的依赖文件方法： sudo apt-get update && sudo apt-get install binutils git git-lfs g…...

编程日记 2025/7/14 2:28:50

form表单提交前设置请求头request header及文件下载

需求&#xff1a;想要在form表单submit之前&#xff0c;设置一下请求头。 除了用Ajax发起请求之外&#xff0c;还可以使用FormData来实现&#xff0c;咱不懂就问。 1 问&#xff1a;FormData什么时间出现的&#xff1f;与ajax什么联系&#xff1f; 2 问&#xff1a;FormData使…...

编程日记 2025/10/16 12:30:47

【c++11】c++11新特性（下）（可变参数模板、default和delete、容器新设定、包装器）

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C 目录 前言 五、可变参数模板 1. 概念及简单定义 2. 包扩展 六、 default和delete 七、容器新设定 1. 新容器 2. 新接口 emplace系列接口 八、函数包…...

编程日记 2025/10/16 12:30:44

PyTorch 实现食物图像分类实战：从数据处理到模型训练

一、简介 在计算机视觉领域&#xff0c;图像分类是一项基础且重要的任务&#xff0c;广泛应用于智能安防、医疗诊断、电商推荐等场景。本文将以食物图像分类为例&#xff0c;基于 PyTorch 框架&#xff0c;详细介绍从数据准备、模型构建到训练测试的全流程&#xff0c;帮助读者…...

编程日记 2025/10/16 12:30:39

Qt —— 在Linux下试用QWebEngingView出现的Js错误问题解决（附上四种解决办法）

错误提示：js: A parser-blocking, cross site (i.e. different eTLD+1) script, https:xxxx, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If bloc…...

编程日记 2025/10/16 12:30:32

命名空间(C++)

命名空间主要用于大型项目中。 局部命名在该局部会覆盖全局命名。C语言中唯一一种在局部调用全局相同命名的全局变量的方式&#xff1a;指针在C中可以用作用域运算符来访问全局变量&#xff0c;作用域运算符的前面可以是作用域也可以是类。 命名空间实际上是对全局作用域的再次…...

编程日记 2025/10/16 12:30:28

使用Python脚本在Mac上彻底清除Chrome浏览历史：开发实战与隐私保护指南

题目&#xff1a; 《基于PyCharm与Mac系统的Chrome历史记录清理工具开发实战》 引言 在Mac系统下&#xff0c;Chrome浏览器的历史记录文件通常以SQLite数据库形式存储于用户目录中&#xff0c;仅通过浏览器内置功能清理可能残留索引文件。本文通过一个Python脚本&#xff08;c…...

编程日记 2025/6/15 1:03:19

LabVIEW圆锥滚子视觉检测系统

基于LabVIEW平台的视觉检测系统提高圆锥滚子内组件的生产质量和效率。通过集成高分辨率摄像头和先进的图像处理算法&#xff0c;系统能够自动识别和分类产品缺陷&#xff0c;从而减少人工检查需求&#xff0c;提高检测的准确性和速度。 ​​ ​ 项目背景 随着制造业对产品质…...

编程日记 2025/10/16 12:30:25

OpenAI 推出「轻量级」Deep Research，免费用户同享

刚刚&#xff0c;OpenAI 正式上线了面向所有用户的「轻量级」Deep Research 版本&#xff0c;意味着即便没有付费订阅&#xff0c;也能体验这一强大工具的核心功能。 核心差异&#xff1a;o4-mini vs. o3 模型迭代 传统的深度研究功能基于更大规模的 o3 模型。轻量级版本则改以…...

编程日记 2025/10/16 12:30:21

罗伯·派克：Go语言创始者的极客人生

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 罗伯派克&#xff1a;Go语言创始者的极客人生 一、传奇程序员的成长历程 1. 早年经历…...

编程日记 2025/10/16 12:30:18

面试题：Redis 一次性获取大量Key的风险及优化方案

Redis 一次性获取大量Key的风险及优化方案 在Redis中一次性获取大量Key&#xff08;如使用KEYS命令或大量GET操作&#xff09;会带来多种风险和性能问题&#xff0c;以下是详细分析和解决方案&#xff1a; 主要风险 1. 阻塞风险 KEYS命令阻塞&#xff1a;KEYS *会扫描整个数…...

编程日记 2025/9/18 2:27:49

中国头部云服务商分析

1. 阿里云 国内云服务的开创者与龙头&#xff0c;占据约三分之一的国内市场份额&#xff0c;其中IaaS占比72%&#xff0c;PaaS与SaaS占比相对较小 全球范围内500万客户&#xff0c;基础设施目前面向全球四大洲&#xff0c;开服运营15个国家、30个公共云地域、89个可用区&#x…...

编程日记 2025/10/8 20:18:43

关于使用git init --bare 裸仓库的使用

1、创建文件夹 对于需要作为仓库的文件夹使用git init --bare进行裸仓库初始化 2、将裸仓库添加为自己的远程仓库 使用的方法和添加远程仓库的方式相同&#xff0c;但是路径需要为绝对路径&#xff0c;同时需要加入file:///协议 git remote add origin file:///d:/Desktop/Lo…...

编程日记 2025/10/9 1:32:58

解释一下计算机中的内存对齐

1. 内存对齐的基本概念 内存对齐是计算机系统优化内存访问效率的一种机制&#xff0c;要求数据在内存中的起始地址必须为某个值的整数倍&#xff08;通常为数据类型大小的整数倍&#xff09;。例如&#xff1a; int (4字节) 应对齐到4的倍数地址&#xff08;如0x00, 0x04, 0x…...

编程日记 2025/10/9 13:23:09

小白工具视频转MPG, 功能丰富齐全,无需下载软件,在线使用,超实用

在视频格式转换需求日益多样的今天&#xff0c;小白工具网的在线视频转 MPG 功能https://www.xiaobaitool.net/videos/convert-to-mpg/ &#xff09;脱颖而出&#xff0c;凭借其出色特性&#xff0c;成为众多用户处理视频格式转换的优质选择。 从格式兼容性来看&#xff0c;它支…...

编程日记 2025/10/16 12:30:15