日期:2014-05-17  浏览次数:20623 次

哪位大神告诉我一下,html5的变换矩阵为什么得出下面的结果?
context.setTransform(1, 0, 0, 1, 0, 0);

 var xScale = Math.cos(Math.PI/4);

 var ySkew  = -Math.sin(Math.PI/4);

 var xSkew  = Math.sin(Math.PI/4);

 var yScale = Math.cos(Math.PI/4);

 var xTrans = 200;

 var yTrans = 200;

 context.transform(xScale, ySkew, xSkew, yScale, xTrans, yTrans);

 context.fillRect(-50, -50, 100, 100)


------解决方案--------------------
x’=x*cosθ-y*sinθ
y’=x*sinθ+y*cosθ
矩阵变换 由x,y绕转θ得到x'和y'
Math.PI/4即为45度角

//初始化为正立
context.setTransform(1, 0, 0, 1, 0, 0);

//下面四个参数说明旋转45度
 var xScale = Math.cos(Math.PI/4);

 var ySkew  = -Math.sin(Math.PI/4);

 var xSkew  = Math.sin(Math.PI/4);

 var yScale = Math.cos(Math.PI/4);

//绕行坐标点
 var xTrans = 200;

 var yTrans = 200;

//进行旋转
 context.transform(xScale, ySkew, xSkew, yScale, xTrans, yTrans);
//填充颜色 参数分别为 x坐标 y坐标 长 宽
 context.fillRect(-50, -50, 100, 100)