一、Canvas基础-09、图形的平移与旋转
没错，我就是切图仔
有时候我们需要实现图像或者文字的平移和变形效果，就需要用到canvas中的这几种方法：
translate(x, y) 平移，再次注意一下，这里的平移xy是指的W3C坐标，而非数学坐标，可参考本教程的第一小节内容 。
scale(x, y) 缩放 x轴缩放的倍数 y轴缩放的倍数 (基于上次的大小进行缩放) 。
scale会影响哪些要素？需要我们谨记以下几点，防止以后写出BUG：
1. 图形放大后，其左上角坐标值也会被放大，我们可以在使用scale后，再使用translate平移恢复 ；
2. 图形宽度高度
3. 线条的宽度
rotate(angle) 旋转 ：
参数angle表示图形旋转角度，取值范围为 -Math.PI * 2 ~ Math.PI * 2 ，传值小于0时逆时针旋转，大于0时顺时针旋转。默认旋转中心是原点，若想指定某个坐标为旋转中心，我们可以先使用translate对旋转中心进行平移，再rotate旋转 。
transform()、setTransform() 变换矩阵。
// 获取canvas对象
const cnv = document.getElementById('myCanvas')
// 获取上下文对象context
const cxt = cnv.getContext('2d')
cxt.fillStyle = 'red'
cxt.rotate(10 * Math.PI / 180)
cxt.fillRect(30, 30, 50, 50)
cxt.translate(50, 50)
cxt.fillRect(30, 30, 50, 50)
cxt.scale(1.5, 1.5)
cxt.translate(-10, -10)
cxt.fillStyle = 'rgba(122, 158, 166, .5)'
cxt.fillRect(30, 30, 50, 50)
// 注意，Canvas平移会保留所有绘制的图形，所以以上写法会渲染原始图形和平移后的图形
// 如果想编写一个动态平移的动画，那么每次绘制前都需要清空画布
// 看过前边课程的人都应该记得，我们一般用clearRect(0, 0, cnv.width, cnv.height)来清空整个画布
// 请牢记此方法，在动画开发中会经常用到
// 变换矩阵涉及到线性代数的知识，等俺复习复习再返回头来补充，变换矩阵暂时不学也不会影响后边的学习。。。。。。。
// 下一小结，我将会编写几个案例来巩固图形的平移旋转相关知识点，明天见~
编辑于 2022-01-28 15:41
