Canvas之7变形

• 1. 平移translate(x,y);
     x:坐标原点向x轴平移的距离
     y:坐标原点向y轴平移的距离

• 案例

  function draw1(){
  	cvs.fillStyle='skyblue';
  	//设置填充颜色天空蓝
  	cvs.fillRect(0,0,200,100);
  	//矩形左上角坐标0,0 宽200px 高100px
  	cvs.translate(50,50);
  	//设置平移 坐标原点向x轴(向右)平移50px 坐标原点向y轴(向下)偏移50px
  	//-->这个平移只会对后面的矩形造成影响 不会影响前面的
  	cvs.fillStyle='pink';
  	//设置填充颜色粉色
  	cvs.fillRect(0,0,180,80);
  	//矩形左上角坐标0,0 宽180px 高80px
  }
  draw1();

• 1. 缩放 vas.scale(x0,y0);
     x0:x轴按照x0的比例缩放
     y0:y轴按照x0的比例缩放

• 案例

  function draw2(){
  	cvs.scale(1,2);//设置缩放 x轴不变 y轴是之前的2倍
  	cvs.fillStyle='plum';//设置填充样式为颜色填充
  	cvs.fillRect(0,0,200,100);
  	//矩形左上角坐标0,0 宽200px 高100px
  	//-->那么转化后的矩形宽200px 高200px
  }
  draw2();

• 3.旋转 vas.rotate(angle);
  angle:坐标轴转的角度 他是一个弧度(和画圆的计算是一样的)

• 案例

  function draw3(){
  	cvs.rotate(Math.PI/4);//设置旋转  旋转角度为45度
  	cvs.fillStyle='lightblue';
  	cvs.fillRect(100,100,200,100);
  }
  draw3();

注意：平移、缩放、旋转都是对原始坐标（画布）操作的

• 例如:

  function draw3(){
  	cvs.translate(200,0);//此时的原点已经变到200,0的位置
  	cvs.rotate(Math.PI/4);//设置旋转  旋转角度为45度
  	cvs.fillStyle='lightblue';
  	cvs.fillRect(100,100,200,100);
  }
  draw3();