HTML5的变形效果实现，包括：移动，缩放，旋转，自定义变形，裁剪，镜像，变形重置等等操作
下面依次讲解：
①移动 / 位移
使用context上下文的translate方法，我们可以控制图形的位置移动，相关方法如下：
context.translate(100, 100); //x轴和y轴移动距离，这里上线文分别移动100个像素
使用translate方法，可以有效的控制context的起始点位置，因为context位置变化，导致绘制图形位置也变化，因此可以方便的在合适位置绘制图形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5画布图形位移</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="mycanvas" width="400" height="300"></canvas>
<script type="text/javascript">
/*相关Javascript*/
var canvas = document.getElementById('mycanvas');
context = canvas.getContext('2d'),
elementwidth = 100,
elementheight = 100;
//为了实现位移效果，使用如下方法：
context.translate(100, 100);
//然后绘制图形，这里我们生成一个矩形
context.fillStyle = 'orange';
context.fillRect(0, 0, elementwidth, elementheight); //这个矩形左上角坐标(0, 0)，宽度和高度均为100px
//注意：translate在你绘制图形之前调用
</script>
</body>
</html>
②缩放
使用context上下文的scale方法，我们可以控制图形的缩放，相关方法如下：
context.scale(50%, 50%); //x轴和y轴缩放比例使用scale方法，可以有效的控制context的缩放，因为context缩放变化，导致绘制图形也变化 注意：要在绘制图形之前控制缩放
③旋转
使用context上下文的rotate方法，实现图形旋转效果
context.rotate(Math.PI/4); //顺时针旋转45度
使用rotate方法，可以有效的控制context的旋转，因为context旋转变化，导致绘制图形也发生变化
④自定义变形
使用画布的自定义变形方法可以实现大家需要的变形方式，如下：
/* * 相关参数说明如下：context.transform(a,b,c,d,e,f); * a: 水平缩放 * b: 水平倾斜 * c: 垂直倾斜 * d: 垂直缩放 * e: 水平位移 * f: 垂直位移 */
例子：context.transform(1, 0.5, 0.5, 1, 100, 100);
注意：变形只影响调用transform方法以后的图形绘制
.⑤阴影效果
//绘制文字阴影 context.scale(1, -1); //再添加一些倾斜效果 context.transform(1, 0, -0.7, 0.7, 0, 0); //旋转了360° context.rotate(Math.PI*2)拓展：
（1）scale() 方法标注画布的用户坐标系统
scale(sx, sy)
scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折，而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折
例如：scale(1，-1)则是类似阳光照射--垂直阴影
（2）rotate() 方法旋转画布的坐标系统
rotate(angle) //旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。
描述：
rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 <Canvas> 元素本身。注意，这个角度是用弧度指定的。
提示：如需把角度转换为弧度，请乘以 Math.PI 并除以 180
文字阴影例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5画布图形位移</title>
<style type="text/css">
/*界面CSS*/
body{
margin:0;
padding:0;
}
#mycanvas{
background: #E4E4E4; /* 画布背景色 */
}
</style>
</head>
<body>
<!-- 定义canvas元素 -->
<canvas id="mycanvas" width="400" height="300"></canvas>
<script type="text/javascript">
/*画布相关JS*/
//获取context
var canvas = document.getElementById('mycanvas'),
context = canvas.getContext('2d');
//执行位移操作
context.translate(200, 100);
//绘制文字到画布
context.font = "30pt microsoft yahei,Arial,sans-serif";
context.textAlign = "center";
context.fillStyle = "orange";
//绘制正常文字
context.fillText("Hello, gbtags!", 0, 0);
//继续位移
context.translate(0, 40);
//绘制文字阴影
context.scale(1, -1);
// context.rotate(Math.PI*2)这里旋转了360°
//再添加一些倾斜效果
context.transform(1, 0, -0.7, 0.7, 0, 0);
//最后添加阴影文字
context.textAlign = "center";
context.fillStyle = "#BFBFBF";
context.fillText("Hello, gbtags!", 0, 0);
</script>
</body>
</html>
⑥重置变形
前面我们学习了transform（变形）方法，这里介绍setTransform（重置变形）方法，它可以帮助你重置你使用transform方法生成的变形效果，代码如下：
//调用reset，重置context上下文 context.setTransform(1,0,0,1,0,0); //这里我们使用setTransform方法来重置以前的变形， //以上设置setTransform参数值为(1,0,0,1,0,0)即可保证重置画布的变形
例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas重置变形</title>
<script type = "text/javascript" src="./jquery.min.js"></script>
<style type="text/css">
/*界面CSS*/
body{
margin:0;
padding:0;
}
#mycanvas{
background: #E4E4E4; /* 画布背景色 */
}
</style>
</head>
<body>
<!-- 定义canvas元素 -->
<canvas id="mycanvas" width="400" height="300"></canvas>
<script>
/*画布相关JS*/
var canvas = document.getElementById('mycanvas'),
context = canvas.getContext('2d'),
elementwidth = 100,
elementheight = 100;
context.translate(100, 100); //将context位置移动到100, 100
//绘制一个矩形
context.fillStyle = 'orange';
context.fillRect(0, 0, elementwidth, elementheight);
//调用reset，重置context上下文
context.setTransform(1,0,0,1,0,0); //这里我们使用setTransform方法来重置以前的变形
//再次绘制一个矩形
context.fillStyle = 'black';
context.fillRect(0, 0, elementwidth, elementheight);
//现在看到使用setTransform方法的作用了吧，可以帮助我们重置context
</script>
</body>
</html>
⑦重置变形
使用context的save和restore（回复）方法可以准确的控制变形状态的保存和恢复，相关代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas重置变形</title>
<script type = "text/javascript" src="./jquery.min.js"></script>
<style type="text/css">
/*界面CSS*/
body{
margin:0;
padding:0;
}
#mycanvas{
background: #E4E4E4; /* 画布背景色 */
}
</style>
</head>
<body>
<!-- 定义canvas元素 -->
<canvas id="mycanvas" width="400" height="300"></canvas>
<script>
/*画布JS*/
var canvas = document.getElementById('mycanvas'),
context = canvas.getContext('2d'),
elementwidth = 50,
elementheight = 50;
//保存初始变形状态
context.save();
//位移变形
context.translate(100, 100);
//保存位移变形状态
context.save();
//旋转变形
context.rotate(-Math.PI/4);
//保存旋转变形状态
context.save();
//缩放变形
context.scale(2, 2);
//开始绘制图形
//第一个图形包含所有变形状态：即，位移+旋转+缩放
context.fillStyle = 'orange';
context.fillRect(0, 0, elementwidth, elementheight);
//恢复到旋转状态点
context.restore();
//第二个图形包含除了缩放以外的所有变形状态：即，位移+旋转
context.fillStyle = 'green';
context.fillRect(0, 0, elementwidth, elementheight);
//恢复到位移状态点
context.restore();
//第三个图形只包含位移变形状态：即，位移
context.fillStyle = 'black';
context.fillRect(0, 0, elementwidth, elementheight);
//恢复到初始状态点，没有任何变形状态
context.restore();
//第四个图形不包含任何的变形状态
context.fillStyle = 'red';
context.fillRect(0, 0, elementwidth, elementheight);
</script>
</body>
</html>
变形状态的保存和恢复遵循“栈”原理，即先入的后出，后入的先出，也就是先显示出来最终结果。类似一个圆桶里放置一层一层的物品，然后一层一层取出的原理类似。
拓展：
（1） fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
context.fillRect(x,y,width,height);
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
.