25King

Html5 canvas学习5-图形变形：缩放旋转平移变形

在canvas对当前绘图对象进行变形时，其中心点是画布(0,0)的坐标原点。

1.缩放

缩放context.scale(x,y)
x:x坐标轴按x比例缩放   y:y坐标轴按y比例缩放
比如1表示不缩放、0.5表示缩小50%、2.3表示放大2.3倍。

例子：

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5; 
    ctx.drawImage(img,10,10); 
    ctx.scale(2,2);
    ctx.drawImage(img,10,10); 
}
script>

注意

- ctx.globalAlpha 属性：设置全局透明度：0-1

- 第二次的 ctx.drawImage(img,10,10) 中的距离参数也同样做了放大，实际在画布上开始绘制的坐标变成了(102, 102)，即(20,20)。

2.旋转

ctx.rotate(angle);
参数angle指要旋转的度数，度数要使用 Math.PI 为基准，你可以把一个 Math.PI 理解为180度，正值表示顺时针，负值表示逆时针，如下我们来把一张图片旋转30度（1/6*Math.PI）：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5; 
    ctx.drawImage(img,10,10); 
    ctx.rotate(1/6*Math.PI);
    ctx.drawImage(img,10,10); 
}

3.平移

ctx.translate( t_x, t_y );
t_x表示在x轴方向上的位移量，t_y表示在y轴方向上的位移量。
示例：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5; 
    ctx.drawImage(img,10,60); 
    ctx.globalAlpha = 1; 
    ctx.translate(50,-30);  //在x轴方向做50px的向右位移，在y轴方向做30px的向上位移
    ctx.drawImage(img,10,60); 
}

上方的代码里，两次drawImage时，其开始绘制的坐标都是(10,60)，我们先试着修改一下，把第二次绘图代码改为ctx.drawImage(img,30,30)：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5; 
    ctx.drawImage(img,10,60); 
    ctx.globalAlpha = 1; 
    ctx.translate(50,-30); 
    ctx.drawImage(img,30,30); //修改参数，让开始绘制的坐标跟上方的不同
}

那么对于这个效果的理解，我们可以看做“画布的坐标系统”在X轴、Y轴方向分别偏移了50px和-30px。

4.变形

ctx.transform(a,b,c,d,e,f);

x和y是元素最开始的坐标，x’ 和y’则是通过矩阵变换后得到新的坐标。通过3×3的变换矩阵，对原先的坐标施加变换，就能得到新的坐标了。

我们来个实例，让图片在原位置上缩小一倍、水平倾斜45度、垂直偏移50px：

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5;
    ctx.drawImage(img,0,0); 
    ctx.globalAlpha = 1;
    ctx.transform(0.5,1,0,0.5,0,50); //变形
    ctx.drawImage(img,0,0);
}
script>

注意此处的“水平倾斜45度”，我们是给参数b赋值1，而不是Math.PI之类的角度值。
在CSS 3中，transform: skew(θx, θy); 就等价于 transform: matrix(tan(θx),0,0,tan(θy),0,0); 而transform()里的倾斜参数也是相当于 tan(倾斜角度) 计算后的值，由于 tan(45°)=1 ，故我们给参数b赋值1来实现水平倾斜45度的效果。

setTransform()

它跟 transform() 有着一样的参数、实现着一样的方法，不过 setTransform() 会重置所有曾设置过的变形数值。
transform() 跟 setTransform() 的区别我们来看个例子：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5;
    ctx.drawImage(img,0,0); 
    ctx.globalAlpha = 1;
    ctx.scale(0.5,0.5);   //缩小至0.5倍
    ctx.transform(0.5,0,0,0.5,0,0); //变形，再要求缩小至0.5倍
    ctx.drawImage(img,0,300);
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.globalAlpha = 0.5;
    ctx.drawImage(img,0,0); 
    ctx.globalAlpha = 1;
    ctx.scale(0.5,0.5);   //缩小至0.5倍
    ctx.setTransform(0.5,0,0,0.5,0,0); //变形，再要求缩小至0.5倍
    ctx.drawImage(img,0,300);
}

可以看到 setTransform() 重置了“缩放”效果，即一开始的 scale(0.5,0.5) 效果被pass掉了，你可以试着把 scale() 改为 scale(3.5,3.5)，但它不会其任何作用。

你也可以做多次尝试，你会发现 setTransform() 会很好地重置、覆盖掉之前设置过的 scale()、translate()、transform() 变形数值。

参考：http://www.cnblogs.com/vajoy/p/4001606.html
http://www.runoob.com/html/html5-canvas.html

Html5 canvas学习5-图形变形：缩放 旋转 平移 变形