canvas的转换方法

导言：在画布中我们需要对绘制的图像进行移动，那么下面就是canvas来提供的一些方法

一、 translate() 平移

translate(x,y) 重新映射画布上的 (0,0) 位置

• x 沿x轴平移的距离
• y 沿y轴平移的距离
  注意：translate平移的是原点，而不是直接平移线条。

cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(100,100);
cxt.stroke();
// cxt.translate(0,100);
cxt.moveTo(0,0);
cxt.translate(0,100);
cxt.lineTo(100,100);
// cxt.translate(0,100);
cxt.stroke();

分析：把translate放在moveTo前面 相当于所有的坐标都是在平移后的坐标系下找到的

分析：把translate放在moveTo后面 把原点平移到(0,100)的情况下 那么初始的原点坐标不变 而(100,100)是在平移之后的坐标系里找到的。

放在lineTo后面 这个跟原始状态一样，因为进行平移原点之后，内存中所有的路径已经绘制完毕，不能产生影响了

二、rotate() 旋转

rotate(angle) 旋转当前绘图。

• 旋转角度，以弧度计算
  注意：这里的旋转效果是可以叠加的 这里不会产生覆盖

三、scale() 缩放

scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小。
- scalewidth：宽度的缩放倍数
- scaleheight：高度的缩放倍数

四、综合案例

context.translate(250, 250);//移动坐标原点
//坐标变换
for(var i = 0; i < 30; i++) {
     context.rotate(Math.PI/10,true);//旋转角度
     context.scale(0.95,0.95);//缩小比例
     context.beginPath();
     context.fillStyle = "rgba(255,157,0,0.5)";
     context.fillRect(100, 100, 120, 60);
     context.closePath();
 }