| 方法 | 说明 |
| --- | --- |
| translate() | 平移 |
| scale() | 缩放 |
| rotate() | 旋转 |
| transform()、setTransform() | 变换矩阵 |
Canvas 的这些变形操作,不仅可以用于图形,还可以用于图像和文字。
`cxt.translate(x, y)`:x 表示图形在 x 轴方向移动的距离,默认为 px;y 同理。
`cxt.scale(x, y)`:x 表示图形在 x 轴方向的缩放倍数,y 同理。另外,scale() 方法还有以下 “副作用” 需要注意,即 scale() 方法会改变图形的以下几点:
- 左上角坐标(比如放大 2 倍,左上角坐标会变为原来的 2 倍)
- 宽度或高度
- 线条宽度
`cxt.rotate(angle)`:参数 angle 表示图形旋转的角度,取值为 -Math.PI*2 ~ Math.PI*2。当 angle < 0 时,图形顺时针旋转;当 angel > 0 时,图形逆时针旋转。
推荐写法如下:
```js
120*Math.PI/180 // 120°
150*Math.PI/180 // 150°
```
## 改变旋转中心
默认情况下,图形旋转是以 Canvas 坐标原点为旋转中心的。如果我们想以某一点(x,y)为旋转中心,可以先使用 translate(x, y),然后再使用 rotate() 方法。
- 序言 & 更新日志
- H5
- Canvas
- 序言
- Part1-直线、矩形、多边形
- Part2-曲线图形
- Part3-线条操作
- Part4-文本操作
- Part5-图像操作
- Part6-变形操作
- Part7-像素操作
- Part8-渐变与阴影
- Part9-路径与状态
- Part10-物理动画
- Part11-边界检测
- Part12-碰撞检测
- Part13-用户交互
- Part14-高级动画
- CSS
- SCSS
- codePen
- 速查表
- 面试题
- 《CSS Secrets》
- SVG
- 移动端适配
- 滤镜(filter)的使用
- JS
- 基础概念
- 作用域、作用域链、闭包
- this
- 原型与继承
- 数组、字符串、Map、Set方法整理
- 垃圾回收机制
- DOM
- BOM
- 事件循环
- 严格模式
- 正则表达式
- ES6部分
- 设计模式
- AJAX
- 模块化
- 读冴羽博客笔记
- 第一部分总结-深入JS系列
- 第二部分总结-专题系列
- 第三部分总结-ES6系列
- 网络请求中的数据类型
- 事件
- 表单
- 函数式编程
- Tips
- JS-Coding
- Framework
- Vue
- 书写规范
- 基础
- vue-router & vuex
- 深入浅出 Vue
- 响应式原理及其他
- new Vue 发生了什么
- 组件化
- 编译流程
- Vue Router
- Vuex
- 前端路由的简单实现
- React
- 基础
- 书写规范
- Redux & react-router
- immutable.js
- CSS 管理
- React 16新特性-Fiber 与 Hook
- 《深入浅出React和Redux》笔记
- 前半部分
- 后半部分
- react-transition-group
- Vue 与 React 的对比
- 工程化与架构
- Hybird
- React Native
- 新手上路
- 内置组件
- 常用插件
- 问题记录
- Echarts
- 基础
- Electron
- 序言
- 配置 Electron 开发环境 & 基础概念
- React + TypeScript 仿 Antd
- TypeScript 基础
- 样式设计
- 组件测试
- 图标解决方案
- Algorithm
- 排序算法及常见问题
- 剑指 offer
- 动态规划
- DataStruct
- 概述
- 树
- 链表
- Network
- Performance
- Webpack
- PWA
- Browser
- Safety
- 微信小程序
- mpvue 课程实战记录
- 服务器
- 操作系统基础知识
- Linux
- Nginx
- redis
- node.js
- 基础及原生模块
- express框架
- node.js操作数据库
- 《深入浅出 node.js》笔记
- 前半部分
- 后半部分
- 数据库
- SQL
- 面试题收集
- 智力题
- 面试题精选1
- 面试题精选2
- 问答篇
- Other
- markdown 书写
- Git
- LaTex 常用命令