Canvas之7变形

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

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

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

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