Canvas 旋转 位移 斜拉 缩放

矩阵

所有的变形(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/