HTML5动画----canvas基础4（矩阵变换--复杂变换）

上节的普通变换，其实就是 矩阵变换的特例，仅此而已

context.transform(m11,m12,m21,m22,dx,dy)//

context.setTransform(m11,m12,m21,m22,dx,dy)//将当前的矩阵进行重置为最初的矩阵，然后以相同的参数调用transform(),即先set（重置）再transform（变换）

 移动context.translate(x,y)=>context.transform(0,1,1,0,dx,dy)//context.transform(1,0,0,1,dx,dy)
 缩放scale(x,y)=>context.transform(m11,0,0,m22,0,0)//context.transform(0,m12,m21,0,0,0)-->
 旋转rotate(rotate)=>context.transform(cos,sin,-sin,cos,0,0)

如ctx.transform(0.95,0,0,0.95,30,30)代替ctx.translate(30,30);ctx.scale(0.95,0.95)
      

<script type="text/javascript">
            function draw(){
                var ctx=document.getElementById("myCanvas").getContext('2d');
                ctx.translate(200,20);
                for(var i=1;i<90;i++){
               //     ctx.save();//保存canvas的状态，restore()用于恢复canvas的状态
                    ctx.transform(0.95,0,0,0.95,30,30);//缩放0.95与移动30,30
                    ctx.rotate(Math.PI/12);//旋转
                    ctx.beginPath();
                    ctx.fillStyle="red";
                    ctx.globalAlpha="0.4";
                    ctx.arc(0,0,50,0,Math.PI*2,true);//画圆
                    ctx.closePath();
                    ctx.fill();
                }
                ctx.setTransform(1,0,0,1,10,10);//恢复的原点再改为原点坐标为（10,10）
                ctx.fillStyle="blue";
                ctx.fillRect(0,0,50,50);//画矩形
                ctx.fillRect();
                ctx.fill();
            }
            window.οnlοad=function(){
                draw();
            }
        </script>
        <canvas id="myCanvas" width="700" height="300"></canvas>