矩阵
所有的变形(transform)的背后都应用了矩阵，例如，斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)的背后都是矩阵计算。
Canvas的transform(a,b,c,d,e,f)和setTransform(a,b,c,d,e,f)。默认参数为(1, 0, 0, 1, 0, 0)。这两个方法都相当于重新建立了一个3*3矩阵，默认矩阵的坐标点都会和这个矩阵做计算，得到经过变换后的坐标点。（具体计算过程参考文章：理解CSS3 transform中的Matrix(矩阵)）。
对于这六个参数，我们需要知道的是：
- e和f用于位移（e代表x轴，f代表y轴）
- a和d用于缩放（e代表x轴，f代表y轴）
- b和c用于拉伸（b代表y轴的tan，c代表x轴的tan）
- a、b、c和d用于旋转（matrix(cosθ,sinθ,-sinθ,cosθ,0,0)）
Canvas镜像翻转
1. 水平镜像翻转
当transform(-1,0,0,1,0,0)时，坐标点以y轴为对称轴翻转。
如果想平移对称轴，例如以x=20为对称轴，需要改变参数e，即transform(-1,0,0,1,40,0)。
示例代码：
function drawTrgle (w,h,color) {
ctx.save();
ctx.beginPath();
ctx.moveTo(w,h-30);
ctx.lineTo(w,h);
ctx.lineTo(w-20,h+10);
ctx.lineTo(w,h-30);
ctx.closePath();
ctx.fillStyle=color;
ctx.fill();
ctx.restore();
}
const xCoord = 480;
const yCoord = 55;
drawTrgle(xCoord,yCoord,'#0086ff');
ctx.transform(-1,0,0,1,xCoord*2,0); // 镜像翻转
drawTrgle(xCoord,yCoord,'#56afff');
ctx.setTransform(1, 0, 0, 1, 0, 0); // 还原坐标系
2. 垂直镜像翻转
当transform(1,0,0,-1,0,0)时，坐标点以x轴为对称轴翻转。
如果想平移对称轴，例如以y=30为对称轴，需要改变参数f，即则transform(1,0,0,-1,0,60)。
3. 任意角度镜像翻转
具体计算过程参考文章：理解CSS3 transform中的Matrix(矩阵)
a = (1-kk)/(kk+1);
b = 2k/(kk+1);
c = 2k/(kk+1);
d = (kk-1)/(kk+1);
Canvas中心旋转
Canvas默认的旋转中心点为坐标系(0,0)。所以想实现某元素的中心点旋转，需要移动坐标系。translate()方法通常用来整体移动坐标系。
一旦移动过坐标系，在绘制其他元素时，应先将坐标系还原：setTransform(1, 0, 0, 1, 0, 0)。
function drawLine () {
var i=0;
let x1 = i*100*Math.PI/180;
ctx.fillStyle='#000';
ctx.translate(250,250);//移动中心点
ctx.rotate(Math.PI/180);
ctx.translate(-250,-250);//移动回来 这步很重要！
ctx.beginPath();
ctx.moveTo(250,250);
ctx.lineTo(Math.sin(x1+Math.PI)*150+250,Math.cos(x1+Math.PI)*150+250);
ctx.closePath();
ctx.stroke();
}
function render () {
//清除画布
ctx.clearRect(0, 0, 500, 500);
// 绘制画布上所有的圆圈圈
drawLine();
// 继续渲染
requestAnimationFrame(render);
};
render();
参考：
https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/