个要做图点，基于（tx,ty）进行平移运算。这个其实是向量运算。也可以看作是矩阵加运算。
(x,y) 经过 (tx, ty) 平移后的点的计算，使用矩阵运算就是：
[ x + [tx => [x+tx]
[y ] ty] [y+ty]
3.2 scale 缩放
scale(xPercent, yPercent) 参数是x,y轴的缩放百分比。 大于1是放大，小于1是缩小。
假设默认是 1个长度占用1个像素。假设画一条长度为 10的直线，就是占用10个像素。
使用scale放大到200%后，画一条长度为 10的直线，就是占用20个像素。
也就是缩放的是坐标轴的长度。
[x [sx*x
y] * [sx, sy] => sy * y]
3.3 skew 拉伸
canvas API中，是没有这个方法的。
上面是一条线段（A，B），围绕起点（A）沿着x,y轴方向进行拉伸。
线段AB上的所有点（x,y），沿着x 轴方向进行拉伸后，坐标变为：（x + y * tan&，y）
线段AB上的所有点（x,y），沿着y 轴方向进行拉伸后，坐标变为：（x ， x * tanβ+ y）
用矩阵来表示拉伸，就是：
[ x * [1 ,tanβ => [x+y*tan&
y] tan&,1] x*tanβ+ y ]
3.3 rotate 旋转
该方法是对坐标轴旋转。
rotate（angle）参数是弧度。之前已经说过了，1度（角度）=PI/180弧度，那么假设你想转90o，那么应该是rotate（90 * Math.PI/180 ）。
rotate 是坐标系旋转，参数是弧度值。
相关理论，可以参考：https://en.wikipedia.org/wiki/Rotation_matrix
用矩阵来表示：
[ x [x*cosθ-y*sinθ
y] * 
=> x*sin θ + y*cos ]
3.3 transform 变换
线性方程： y = ax + b ；可以表示为 x 放大 a倍后，沿着y轴向上平移 b，
[a c e [x x' = ax + cy + e
b d f * y => y' = bx +dy +f
0 0 1 ] 1] 1 = 1
transform(xscala,yskew,xskew,yscala,xtranslate,ytranslate) 该方法是对坐标系进行平移、缩放、旋转的综合的操作。
xscala:x轴缩放
yskew:沿y轴方向拉伸
xskew:沿x轴方向拉伸
yscala:y轴缩放
xtranslate:沿x轴平移
ytranslate:沿y轴平移
矩阵中的a,b,c,d,e,f分别代表：
a = xscale
b= yskew
c =xskew
d= yscale
e = xtranslate
f = ytranslate
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="3000" height="1500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var length = 200, width = 20, height =80;
var angle= Math.PI/8;
var yskew = angle;
var xskew = Math.PI/2 - yAxisRarote;
var xTanslate = 240;
var yTanslate = 140;
var deltaYTranslate = width, deltaXTranslate = deltaYTranslate / Math.tan(angle) ;
// 后面
ctx.transform(1,0,0,1,xTanslate ,yTanslate );
ctx.fillStyle="red";
ctx.fillRect(0,0,length,height);
// 复原
ctx.transform(1,0,0,1, 0 - xTanslate , 0-yTanslate );
// 前面
ctx.transform(1,0,0,1,xTanslate + deltaXTranslate ,yTanslate + deltaYTranslate );
ctx.fillStyle="green"