html5＜canvas矩阵转换＞

所谓的矩阵转换就是数学线性代数中的一个概念。在线
性代数中，线性变换能够用矩阵表示。而在图形图像学
中，所谓的矩阵转换，一般是用来表示图形的变换，如：
平移，旋转，缩放，斜切。而这些变化全部都是基于矩
阵变换计算而出的。但是矩阵运算比较复杂， canvas已
经把相应的变换封装成函数，我们可以直接使用从而简
化了我们的工作。 canvas里面的变换包括:平移，旋转，
缩放.但不包括斜切！

1.变换基点的问题(当图形变化的时候都是以canvas原点为基准点)
2.变换方法影响范围的问题(当使用了变换方法，会对哪些图形有影响)
3.保存和恢复状态的问题(如何只变换某个图形，而使的其他的图形
保持原有的样式)save() restore()
4.如何消除变形记忆的问题

5.关于清除画布的问题

var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境

// 平移
var num = 0;
setInterval(function(){
    cobj.clearRect(0,0,400,400);
    num++;
    cobj.save();//因为计数器具有记忆功能，所以必须得消除记忆
    cobj.translate(num, 0);
    cobj.fillRect(0,0,20,20);
    cobj.restore();//因为计数器具有记忆功能，所以必须得消除记忆

}, 100);

//清除画布的问题
cobj.translate(100, 100)

cobj.fillRect(-50,-50,100,100);
cobj.clearRect(0,0,600,600);//因为删除的是从0,0开始，所以缺了一口

                setInterval(function(){
                    cobj.clearRect(0,0,600,600);
                    cobj.save();
                    cobj.rotate(10*Math.PI/180);
                    cobj.strokeRect(200,200,10,10);
                    // cobj.restore();
                }, 1000);

// transform变化矩阵
                // (X轴缩放比例，x轴斜切角度,y轴斜切角度，y轴缩放比例，x轴平移量，y轴平移量)
                cobj.translate(100, 100);
                cobj.setTransform(0.5, 10*Math.PI/180, 10*Math.PI/180, 0.5, 100, 100);//两次平移,会累加，可以用setTransform打回原形，再来重新设置，不受前面的影响
                cobj.strokeRect(100,100, 100,100);