HTml5 Canvas 整理笔记之图形变换

先提出：为啥要图形变换？

先回答：对图形的变化不单单是单纯的“迎合”视觉，更大的用处在于代码的复用，绘制完基础图形之后，可以调用它进行复用，单纯的复用是不是很单调，通过图形变换则使画面更加精彩，比如你只画了一个树，起就能通过代码复用加图形变换拥有一片绚丽的森林。

进入主题

1.位移translate(x,y)

默认坐标的（0，0）点是画布（canvas）的左上定点，你画图形和曲线的是以它为基准，translate（）的功能就是改变图形的基准点（（0，0）点），这样你能平移所画的东西。

2.缩放scale(sx,sy)

sx:在横向缩放比例

sy:纵向缩放比例

对于位移和缩放给出下面代码做示例：

<canvas id="tails" width=400 height=600 style="border: 1px slateblue dashed;display: block;margin: 50px auto;">
<script>
var canvas = document.getElementById("tails");
var context = canvas.getContext('2d');
//画文字
context.textAlign="center";
context.fillStyle="green";
context.font="bold 50px Arial";
context.fillText("Happy Trails!",200,50);
//先画个小树
DrawTreen(context,1,1,130, 250);

//再画一个大树
DrawTreen(context,1.4,1.4,200,500);
context.save();
context.translate(-10, 350);
context.beginPath();
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);
context.quadraticCurveTo(310, -250, 410, -250);
context.strokeStyle = 'chocolate';
context.lineWidth = 20;
context.stroke();
context.restore();
//画树函数
function DrawTreen(context,x1,y1,x2,y2) {

DrawShadow(context,x1,y1,x2,y2);
context.save();
context.translate(x2,y2);
context.scale(x1,y1);
context.shadowBlur = 14;
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
context.closePath();
context.fillStyle = 'green';
context.fill();
context.fillStyle = 'black'
context.fillRect(-5, -50, 10, 50);
context.stroke();
context.restore();
}
//画阴影
function DrawShadow(context,x1,y1,x2,y2){
context.save();
context.translate(x2,y2);
context.scale(x1,y1);
context.transform(1, 0, -0.5, 0.6, 0, 0)
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
context.closePath();
context.fillStyle = 'rgba(0, 0, 0,0.3)';
context.fill();
context.fillStyle = 'rgba(0, 0, 0, 0.3)'
context.fillRect(-5, -50, 10, 50);
//                  context.stroke();
context.restore();
}
</script>
</canvas>

结果如下：

3.旋转rotate(deg)

旋转就是绕基准点（（0，0）点）旋转特定角度，至于可以做什么自己可以思考，你如时钟的刻度，动态的旋转某一物体等。

温馨提醒Cavans的保存和恢复：

save（）

restore()

它们（要配对使用，最好要养成习惯，反正加了没有坏处）的作用就是对图形变换状态的保存和恢复，因为在有些情况下你会做很多图形变换，translate(x,y) 、scale(sx,sy)、rotate(deg)会有叠加现象（会相互影响）。

如下：

代码：



没加 save（）和restore()之前



加 save（）和restore()之后

4.transform(a,b,c,d,e,f)

原图



水平缩为原来的0.5倍





使用settransform可以避免叠加，相当于重新开始set一遍

设置setTransform之前





替换为setTransform之后、





它会把前面设置的图形变换都清除！！